From b84570d1719bb8b7030dc80e631912806c50e988 Mon Sep 17 00:00:00 2001 From: robyngit Date: Wed, 11 Sep 2024 08:49:38 -0400 Subject: [PATCH 1/4] Add view only mode to table editor Issue #1758 --- src/js/templates/tableEditor.html | 2 +- src/js/views/TableEditorView.js | 35 ++++++++++++++++++++++++++----- 2 files changed, 31 insertions(+), 6 deletions(-) diff --git a/src/js/templates/tableEditor.html b/src/js/templates/tableEditor.html index c954e086a..c514d303d 100644 --- a/src/js/templates/tableEditor.html +++ b/src/js/templates/tableEditor.html @@ -22,7 +22,7 @@ -
+
From 72b0634adefcaebc97a4ff0340464c57dbf737b8 Mon Sep 17 00:00:00 2001 From: robyngit Date: Wed, 11 Sep 2024 09:20:18 -0400 Subject: [PATCH 2/4] Keep sort function in table editor view mode Issue #1758 --- src/js/views/TableEditorView.js | 48 ++++++++++++++++++++++----------- 1 file changed, 33 insertions(+), 15 deletions(-) diff --git a/src/js/views/TableEditorView.js b/src/js/views/TableEditorView.js index 932097ffc..17924cf1a 100644 --- a/src/js/views/TableEditorView.js +++ b/src/js/views/TableEditorView.js @@ -19,6 +19,9 @@ define([ const CLASS_NAMES = { button: "dropbtn", controls: "spreadsheet-controls", + colOption: "col-dropdown-option", + sortButton: "col-sort", + rowHeader: "row-header", }; // a utility function to check if a value is empty for sorting const valIsEmpty = (x) => @@ -147,10 +150,6 @@ define([ // defaults to empty table this.createSpreadsheet(); } - - if (this.viewMode) { - this.deactivateEditing(); - } }, /** @@ -208,6 +207,11 @@ define([ this.createTableBody(tableBody, this.rowCount, this.colCount); this.populateTable(); + + // If in view mode, remove editing functionality + if (this.viewMode) { + this.deactivateEditing(); + } }, /** @@ -216,12 +220,26 @@ define([ */ deactivateEditing() { const tableCells = this.el.querySelectorAll("td, th > span"); - const menuButtons = this.el.querySelectorAll(`.${CLASS_NAMES.button}`); const controls = this.el.querySelectorAll(`.${CLASS_NAMES.controls}`); - tableCells.forEach((td) => (td.contentEditable = false)); - menuButtons.forEach((btn) => (btn.style.display = "none")); - controls.forEach((control) => (control.style.display = "none")); + tableCells.forEach((td) => td.setAttribute("contentEditable", "false")); + controls.forEach((control) => + control.style.setProperty("display", "none"), + ); + + // Hide every button except the sort button in the columns + this.el + .querySelectorAll( + `.${CLASS_NAMES.colOption}:not(.${CLASS_NAMES.sortButton})`, + ) + .forEach((btn) => { + btn.style.setProperty("display", "none"); + }); + + // Hide row controls + this.$el + .find(`.${CLASS_NAMES.rowHeader} .${CLASS_NAMES.button}`) + .hide(); }, /** @@ -353,10 +371,10 @@ define([
- - - - + + + +
`; th.appendChild(span); @@ -397,7 +415,7 @@ define([ `; cell.appendChild(span); cell.appendChild(dropDownDiv); - cell.setAttribute("class", "row-header"); + cell.setAttribute("class", CLASS_NAMES.rowHeader); } else { cell.contentEditable = true; } @@ -690,14 +708,14 @@ define([ document .getElementById(`col-dropdown-${idArr[2]}`) .classList.toggle("show"); - } else if (classes.contains("col-dropdown-option")) { + } else if (classes.contains(CLASS_NAMES.colOption)) { const index = e.target.parentNode.id.split("-")[2]; if (classes.contains("col-insert-left")) { view.addColumn(index, "left"); } else if (classes.contains("col-insert-right")) { view.addColumn(index, "right"); - } else if (classes.contains("col-sort")) { + } else if (classes.contains(CLASS_NAMES.sortButton)) { view.sortColumn(index); } else if (classes.contains("col-delete")) { view.deleteColumn(index); From 1f72aed7b421626bad4e333859197022b7838d7e Mon Sep 17 00:00:00 2001 From: robyngit Date: Thu, 12 Sep 2024 11:30:37 -0400 Subject: [PATCH 3/4] Modularize downloadWithCredentials in SolrResult - Separate out the logic for getting the data from DataONE from the logic for downloading that data onto the user's machine. - Allows us to use the same data fetching logic in other parts of the app, i.e. the DataONEObjectView. - Also separate out the logic for getting the file name. - Add a tests for the new functions Issue #1758 --- src/js/models/SolrResult.js | 175 +++++++++---------- test/js/specs/unit/models/SolrResult.spec.js | 106 ++++++++++- 2 files changed, 184 insertions(+), 97 deletions(-) diff --git a/src/js/models/SolrResult.js b/src/js/models/SolrResult.js index 4bf2cb00a..fd8c2ddeb 100644 --- a/src/js/models/SolrResult.js +++ b/src/js/models/SolrResult.js @@ -1,11 +1,11 @@ -define(["jquery", "underscore", "backbone"], function ($, _, Backbone) { +define(["jquery", "underscore", "backbone"], ($, _, Backbone) => { /** * @class SolrResult * @classdesc A single result from the Solr search service * @classcategory Models * @extends Backbone.Model */ - var SolrResult = Backbone.Model.extend( + const SolrResult = Backbone.Model.extend( /** @lends SolrResult.prototype */ { // This model contains all of the attributes found in the SOLR 'docs' field inside of the SOLR response element defaults: { @@ -278,103 +278,96 @@ define(["jquery", "underscore", "backbone"], function ($, _, Backbone) { ); }, - /* - * This method will download this object while sending the user's auth token in the request. + /** + * Download this object while sending the user's auth token in the + * request. */ - downloadWithCredentials: function () { - //if(this.get("isPublic")) return; - - //Get info about this object - var url = this.get("url"), - model = this; - - //Create an XHR - var xhr = new XMLHttpRequest(); + async downloadWithCredentials() { + const model = this; - //Open and send the request with the user's auth token - xhr.open("GET", url); + // Call the new getBlob method and handle the response + const response = await this.fetchDataObjectWithCredentials(); + const blob = await response.blob(); + const filename = this.getFileNameFromResponse(response); - if (MetacatUI.appUserModel.get("loggedIn")) xhr.withCredentials = true; - - //When the XHR is ready, create a link with the raw data (Blob) and click the link to download - xhr.onload = function () { - if (this.status == 404) { - this.onerror.call(this); - return; - } - - //Get the file name to save this file as - var filename = xhr.getResponseHeader("Content-Disposition"); - - if (!filename) { - filename = - model.get("fileName") || - model.get("title") || - model.get("id") || - "download"; - } else - filename = filename - .substring(filename.indexOf("filename=") + 9) - .replace(/"/g, ""); - - //Replace any whitespaces - filename = filename.trim().replace(/ /g, "_"); - - //For IE, we need to use the navigator API - if (navigator && navigator.msSaveOrOpenBlob) { - navigator.msSaveOrOpenBlob(xhr.response, filename); - } - //Other browsers can download it via a link - else { - var a = document.createElement("a"); - a.href = window.URL.createObjectURL(xhr.response); // xhr.response is a blob - - // Set the file name. - a.download = filename; - - a.style.display = "none"; - document.body.appendChild(a); - a.click(); - a.remove(); - } - - model.trigger("downloadComplete"); - - // Track this event - MetacatUI.analytics?.trackEvent( - "download", - "Download DataONEObject", - model.get("id"), - ); - }; - - xhr.onerror = function (e) { - model.trigger("downloadError"); + // For IE, we need to use the navigator API + if (navigator && navigator.msSaveOrOpenBlob) { + navigator.msSaveOrOpenBlob(blob, filename); + } else { + // Other browsers can download it via a link + const a = document.createElement("a"); + a.href = window.URL.createObjectURL(blob); + a.download = filename; + a.style.display = "none"; + document.body.appendChild(a); + a.click(); + a.remove(); + } - // Track the error - MetacatUI.analytics?.trackException( - `Download DataONEObject error: ${e || ""}`, - model.get("id"), - true, - ); - }; + // Track this event + model.trigger("downloadComplete"); + MetacatUI.analytics?.trackEvent( + "download", + "Download DataONEObject", + model.get("id"), + ); + }, - xhr.onprogress = function (e) { - if (e.lengthComputable) { - var percent = (e.loaded / e.total) * 100; - model.set("downloadPercent", percent); + /** + * This method will fetch this object while sending the user's auth token + * in the request. The data can then be downloaded or displayed in the + * browser + * @returns {Promise} A promise that resolves when the data is fetched + * @since 0.0.0 + */ + fetchDataObjectWithCredentials() { + const url = this.get("url"); + const token = MetacatUI.appUserModel.get("token") || ""; + const method = "GET"; + + return new Promise((resolve, reject) => { + const headers = {}; + if (token) { + headers.Authorization = `Bearer ${token}`; } - }; - - xhr.responseType = "blob"; - if (MetacatUI.appUserModel.get("loggedIn")) - xhr.setRequestHeader( - "Authorization", - "Bearer " + MetacatUI.appUserModel.get("token"), - ); + fetch(url, { method, headers }) + .then((response) => { + if (!response.ok) { + throw new Error(`Failed to fetch: ${response.statusText}`); + } + resolve(response); + }) + .catch((error) => { + reject(error); + }); + }); + }, - xhr.send(); + /** + * Get the filename from the response headers or default to the model's + * title, id, or "download" + * @param {Response} response - The response object from the fetch request + * @returns {string} The filename to save the file as + * @since 0.0.0 + */ + getFileNameFromResponse(response) { + const model = this; + let filename = response.headers.get("Content-Disposition"); + + if (!filename) { + filename = + model.get("fileName") || + model.get("title") || + model.get("id") || + "download"; + } else { + filename = filename + .substring(filename.indexOf("filename=") + 9) + .replace(/"/g, ""); + } + filename = filename.trim().replace(/ /g, "_"); + return filename; }, getInfo: function (fields) { diff --git a/test/js/specs/unit/models/SolrResult.spec.js b/test/js/specs/unit/models/SolrResult.spec.js index b67f00a03..f3c08968b 100644 --- a/test/js/specs/unit/models/SolrResult.spec.js +++ b/test/js/specs/unit/models/SolrResult.spec.js @@ -1,20 +1,21 @@ -define(["../../../../../../../../src/js/models/SolrResult"], function ( - SolrResult, -) { +define(["models/SolrResult"], function (SolrResult) { // Configure the Chai assertion library var should = chai.should(); var expect = chai.expect; - let solrResult; + let solrResult, fetchStub; - describe("Search Test Suite", function () { + describe("SolrResult Test Suite", function () { /* Set up */ beforeEach(function () { solrResult = new SolrResult(); + // Create a stub for the fetch API + fetchStub = sinon.stub(window, "fetch"); }); /* Tear down */ - after(function () { + afterEach(function () { solrResult = undefined; + fetchStub.restore(); }); describe("The SolrResult model", function () { @@ -22,5 +23,98 @@ define(["../../../../../../../../src/js/models/SolrResult"], function ( solrResult.should.be.instanceof(SolrResult); }); }); + + describe("downloadWithCredentials", function () { + it("should download a file with valid credentials", async function () { + const mockBlob = new Blob(["test"], { type: "text/plain" }); + const mockResponse = new Response(mockBlob, { + status: 200, + headers: { + "Content-Disposition": 'attachment; filename="testfile.txt"', + }, + }); + + // Mock fetch response + fetchStub.resolves(mockResponse); + + // Spy on model.trigger to check if the events are triggered + const triggerSpy = sinon.spy(solrResult, "trigger"); + + // Execute the downloadWithCredentials method + await solrResult.downloadWithCredentials(); + + // Ensure that fetch was called once + sinon.assert.calledOnce(fetchStub); + + // Check if the downloadComplete event was triggered + sinon.assert.calledWith(triggerSpy, "downloadComplete"); + }); + }); + + describe("fetchDataObjectWithCredentials", function () { + it("should fetch the data object with valid credentials", async function () { + const mockResponse = new Response("{}", { status: 200 }); + + // Mock fetch response + fetchStub.resolves(mockResponse); + + // Execute the fetchDataObjectWithCredentials method + const response = await solrResult.fetchDataObjectWithCredentials(); + + // Ensure that fetch was called once + sinon.assert.calledOnce(fetchStub); + + // The response should be the mock response + response.status.should.equal(200); + }); + + it("should throw an error for a failed fetch", async function () { + // Mock a failed fetch response + fetchStub.rejects(new Error("Failed to fetch")); + + try { + await solrResult.fetchDataObjectWithCredentials(); + } catch (error) { + error.message.should.equal("Failed to fetch"); + } + + // Ensure that fetch was called once + sinon.assert.calledOnce(fetchStub); + }); + }); + + describe("getFileNameFromResponse", function () { + it("should extract filename from Content-Disposition header", function () { + const mockResponse = new Response(null, { + headers: { + "Content-Disposition": 'attachment; filename="testfile.txt"', + }, + }); + + // Execute getFileNameFromResponse + const filename = solrResult.getFileNameFromResponse(mockResponse); + + // Ensure the filename is correct + filename.should.equal("testfile.txt"); + }); + + it("should fall back to model attributes for filename", function () { + // Set model properties + sinon.stub(solrResult, "get").callsFake(function (attr) { + if (attr === "fileName") return "defaultFileName.txt"; + return null; + }); + + const mockResponse = new Response(null, { + headers: {}, + }); + + // Execute getFileNameFromResponse + const filename = solrResult.getFileNameFromResponse(mockResponse); + + // Ensure the fallback filename is correct + filename.should.equal("defaultFileName.txt"); + }); + }); }); }); From 646cd1490f2763e77f3abdbd89984993e335e6be Mon Sep 17 00:00:00 2001 From: robyngit Date: Thu, 12 Sep 2024 11:40:37 -0400 Subject: [PATCH 4/4] Add a View for getting & displaying Data Objects - MVP, shows CSVs in a table (no other file types yet, no loading spinner, or error handling) - Ensure TableEditorView returns the view from render() Issue #1758 --- src/js/views/DataObjectView.js | 85 +++++++++++++++++++++++++++++++++ src/js/views/TableEditorView.js | 5 +- 2 files changed, 87 insertions(+), 3 deletions(-) create mode 100644 src/js/views/DataObjectView.js diff --git a/src/js/views/DataObjectView.js b/src/js/views/DataObjectView.js new file mode 100644 index 000000000..569d0cb6d --- /dev/null +++ b/src/js/views/DataObjectView.js @@ -0,0 +1,85 @@ +"use strict"; + +define(["backbone", "views/TableEditorView"], (Backbone, TableEditorView) => { + // The base class for the view + const BASE_CLASS = "object-view"; + + /** + * @class DataObjectView + * @classdesc A view that downloads and displays a DataONE object. Currently + * there is support for displaying CSV files as a table. + * @classcategory Views + * @augments Backbone.View + * @class + * @since 0.0.0 + * @screenshot views/DataObjectView.png //TODO + */ + const DataObjectView = Backbone.View.extend( + /** @lends DataObjectView.prototype */ + { + /** @inheritdoc */ + type: "DataObjectView", + + /** @inheritdoc */ + className: BASE_CLASS, + + /** @inheritdoc */ + tagName: "div", + + /** + * Initializes the DataObjectView + * @param {object} options - Options for the view + * @param {SolrResult} options.model - A SolrResult model + */ + initialize(options) { + this.model = options.model; + // TODO: We get format from the response headers, should we compare it, + // or prevent downloading the object if it's not a supported type? + // this.format = this.model.get("formatId") || + // this.model.get("mediaType"); + }, + + /** @inheritdoc */ + render() { + this.$el.empty(); + this.downloadObject().then((response) => this.renderObject(response)); + return this; + }, + + /** + * With the already fetched DataONE object, check the format and render + * the object accordingly. + * @param {Response} response - The response from the DataONE object API + */ + renderObject(response) { + const format = response.headers.get("Content-Type"); + if (format === "text/csv") { + response.text().then((text) => { + this.csv = text; + this.showTable(); + }); + } + }, + + /** + * Downloads the DataONE object + * @returns {Promise} Promise that resolves with the Response from DataONE + */ + downloadObject() { + return this.model.fetchDataObjectWithCredentials(); + }, + + /** Shows the CSV file as a table */ + showTable() { + this.table = new TableEditorView({ + viewMode: true, + csv: this.csv, + }); + this.el.innerHTML = ""; + this.el.appendChild(this.table.render().el); + }, + }, + ); + + return DataObjectView; +}); diff --git a/src/js/views/TableEditorView.js b/src/js/views/TableEditorView.js index 17924cf1a..aa80e2526 100644 --- a/src/js/views/TableEditorView.js +++ b/src/js/views/TableEditorView.js @@ -125,9 +125,7 @@ define([ }); }, - /** - * Renders the tableEditor - add UI for creating and editing tables - */ + /** @inheritdoc */ render() { // Insert the template into the view this.$el @@ -150,6 +148,7 @@ define([ // defaults to empty table this.createSpreadsheet(); } + return this; }, /**