From 26b6790260e4580007f1789e1e24a3046441c76a Mon Sep 17 00:00:00 2001 From: gpveronica Date: Tue, 10 Dec 2024 15:08:38 +0100 Subject: [PATCH 1/2] wc - Fetch file (it required a quick fix in opencga as well to make the endpoint work) #TASK-7220 #TASK-7100 Signed-off-by: gpveronica --- src/webcomponents/file/file-data-manager.js | 40 +++- src/webcomponents/file/file-fetch.js | 199 ++++++++++++++++++++ 2 files changed, 232 insertions(+), 7 deletions(-) create mode 100644 src/webcomponents/file/file-fetch.js diff --git a/src/webcomponents/file/file-data-manager.js b/src/webcomponents/file/file-data-manager.js index 40a045fc4..281961235 100644 --- a/src/webcomponents/file/file-data-manager.js +++ b/src/webcomponents/file/file-data-manager.js @@ -23,6 +23,7 @@ import "../loading-spinner.js"; import "./file-view.js"; import "./folder-create.js"; import "./file-create.js"; +import "./file-fetch.js" import NotificationUtils from "../commons/utils/notification-utils"; import LitUtils from "../commons/utils/lit-utils"; @@ -63,30 +64,32 @@ export default class FileDataManager extends LitElement { this.loading = false; this.entityActions = { - "create-folder": { + "folder-create": { tooltip: "New Folder", icon: "fas fa-folder-plus", modalTitle: "Create Folder", - modalId: `${this._prefix}CreateFolderModal`, + modalId: `${this._prefix}FolderCreateModal`, render: () => this.renderFolderCreate(), // permission: this.permissions["organization"](), }, - "create-file": { + "file-create": { tooltip: "New File", icon: "fas fa-file", modalTitle: "Create File", - modalId: `${this._prefix}CreateFileModal`, + modalId: `${this._prefix}FileCreateModal`, render: () => this.renderFileCreate(), }, - "upload-file": { + "file-upload": { tooltip: "Upload File", action: null, icon: "fas fa-upload", }, - "fetch-file": { + "file-fetch": { tooltip: "Fetch File", - action: null, icon: "fas fa-cloud-download-alt", + modalTitle: "Fetch File", + modalId: `${this._prefix}FileFetchModal`, + render: () => this.renderFileFetch(), }, }; @@ -487,6 +490,29 @@ export default class FileDataManager extends LitElement { }); } + renderFileFetch() { + debugger + return ModalUtils.create(this, `${this.entityActions[this.entityAction]["modalId"]}`, { + display: { + modalTitle: this.entityActions[this.entityAction]["modalTitle"], + modalDraggable: true, + modalSize: "modal-lg", + }, + render: () => { + debugger + return html` + + + `; + }, + }); + } + + renderViewFile() { return ModalUtils.create(this, `${this._prefix}ViewFileModal`, { display: { diff --git a/src/webcomponents/file/file-fetch.js b/src/webcomponents/file/file-fetch.js new file mode 100644 index 000000000..169ccacb7 --- /dev/null +++ b/src/webcomponents/file/file-fetch.js @@ -0,0 +1,199 @@ +/** + * Copyright 2015-2024 OpenCB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {html, LitElement} from "lit"; +import LitUtils from "../commons/utils/lit-utils.js"; +import NotificationUtils from "../commons/utils/notification-utils.js"; +import UtilsNew from "../../core/utils-new.js"; + + +export default class FileFetch extends LitElement { + + constructor() { + super(); + + this.#init(); + } + + createRenderRoot() { + return this; + } + + static get properties() { + return { + path: { + type: String, + }, + opencgaSession: { + type: Object + }, + displayConfig: { + type: Object + }, + }; + } + + #init() { + this.JOB_ID = "file-fetch"; + + this.displayConfigDefault = { + style: "margin: 10px", + titleWidth: 3, + defaultLayout: "horizontal", + buttonOkText: "Fetch File", + buttonClearText: "Discard Changes", + + }; + this.#initOriginalObjects(); + } + + #initOriginalObjects() { + this._data = {}; + this._config = this.getDefaultConfig(); + } + + #setLoading(value) { + this.isLoading = value; + this.requestUpdate(); + } + + update(changedProperties) { + if (changedProperties.has("path")) { + this._data.path = `/${this.path}`; + } + if (changedProperties.has("displayConfig")) { + this.displayConfig = { + ...this.displayConfigDefault, + ...this.displayConfig + }; + this._config = this.getDefaultConfig(); + } + super.update(changedProperties); + } + + onFieldChange(e) { + this._data = {...e.detail.data}; // force to refresh the object-list + this.requestUpdate(); + } + + onClear() { + NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_CONFIRMATION, { + title: "Clear Fetch File", + message: "Are you sure to clear?", + ok: () => { + this.#initOriginalObjects(); + this.requestUpdate(); + }, + }); + } + + onSubmit() { + const {jobId, ...data} = this._data; + const params = { + study: this.opencgaSession.study.fqn, + jobId: jobId ?? `${this.JOB_ID}-${UtilsNew.getDatetime()}`, + }; + debugger + this.#setLoading(true); + debugger + this.opencgaSession.opencgaClient.files() + .fetch(data, params) + .then(() => { + this.#initOriginalObjects(); + NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_SUCCESS, { + title: "Job launched", + message: `Job ${jobId} has been launched successfully`, + }); + LitUtils.dispatchCustomEvent(this, "fileFetch", data); + }) + .catch(error => { + NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, error); + }) + .finally(() => { + this.#setLoading(false); + }); + } + + + render() { + if (this.isLoading) { + return html``; + } + + return html` + + `; + } + + getDefaultConfig() { + return { + display: this.displayConfig || this.displayConfigDefault, + sections: [ + { + title: "General Information", + elements: [ + { + title: "URL", + field: "url", + type: "input-text", + required: true, + }, + { + title: "Path", + field: "path", + type: "input-text", + required: true, + display: { + defaultValue: `/${this.path}`, + disabled: true, + }, + }, + ], + }, + /* + Note 20241210 Vero: It has been discussed and decided not to utilise the analysis-utils component for + populating the job parameters. It has issues, such as invoking the onClear() method after submitting + the query or using the button name "Run Analysis". + If the analysis-tools component is intended to be reusable for endpoints that execute jobs but are not + true analysis tools, it will need to be refactored. + */ + { + title: "Job Info", + elements: [ + { + title: "Job ID", + field: "jobId", + type: "input-text", + display: { + placeholder: `${this.JOB_ID}-${UtilsNew.getDatetime()}`, + help: { + text: "If empty then it is automatically initialized with the tool ID and current date" + } + }, + }, + ], + } + ], + }; + } +} + +customElements.define("file-fetch", FileFetch); From e9a48ce274a59509c03a23bbdd650159a909d3d8 Mon Sep 17 00:00:00 2001 From: gpveronica Date: Tue, 10 Dec 2024 15:08:54 +0100 Subject: [PATCH 2/2] wc - Tiny clean #TASK-7220 #TASK-7100 Signed-off-by: gpveronica --- src/webcomponents/file/file-create.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/webcomponents/file/file-create.js b/src/webcomponents/file/file-create.js index c8bfce550..9d4852359 100644 --- a/src/webcomponents/file/file-create.js +++ b/src/webcomponents/file/file-create.js @@ -141,7 +141,6 @@ export default class FileCreate extends LitElement { let params = { study: this.opencgaSession.study.fqn, }; - let error; this.#setLoading(true); this.opencgaSession.opencgaClient.files() .create(data, params)