From c99b8085c6111624daab5bab15c2c4ef9e1065cd Mon Sep 17 00:00:00 2001 From: Rushiraj Nenuji <19696935+rushirajnenuji@users.noreply.github.com> Date: Thu, 17 Aug 2023 11:51:21 -0700 Subject: [PATCH] [WIP] Entity modal dialog --- src/css/metacatui-common.css | 13 +++- src/js/templates/entityModal.html | 50 ++++++++------ src/js/views/EntityModalView.js | 16 ++++- src/js/views/MetadataIndexView.js | 12 ++-- src/js/views/MetadataView.js | 107 ++++++++++++++++++++++-------- 5 files changed, 137 insertions(+), 61 deletions(-) diff --git a/src/css/metacatui-common.css b/src/css/metacatui-common.css index 49a3c41e7..65daa7e01 100644 --- a/src/css/metacatui-common.css +++ b/src/css/metacatui-common.css @@ -9174,4 +9174,15 @@ body > #extension-is-installed{ border: 0px; box-shadow: none; border: 1px solid #146660; - } \ No newline at end of file + } + +.entity.modal { + width: calc(100% - 215px); /* 100% - prov-chart width - (padding + borders)*/ + left: 20%; +} +.entityDetails > .modal-body { + height: calc(100% - 215px); +} +.entity.modal > .form-horizontal > .entityDetails > .modal-dialog > .modal-content > .modal-body { + max-height: 750px; +} \ No newline at end of file diff --git a/src/js/templates/entityModal.html b/src/js/templates/entityModal.html index 84ab78c92..0af1b3ccb 100644 --- a/src/js/templates/entityModal.html +++ b/src/js/templates/entityModal.html @@ -1,25 +1,33 @@ -
-
-
- - -
- -
-
+
+
+
+
+
+ + + + +
+ +
+
+
+
+ +
+
+
- -
-
+
- +
- - \ No newline at end of file +
\ No newline at end of file diff --git a/src/js/views/EntityModalView.js b/src/js/views/EntityModalView.js index 1db9799a8..86f04cd80 100644 --- a/src/js/views/EntityModalView.js +++ b/src/js/views/EntityModalView.js @@ -19,7 +19,7 @@ define([ * Classes to add to the modal * @type {string} */ - className: "modal fade hide", + className: "entity modal fade hide", /** * The underscore template for the main part of this view (modal) @@ -45,6 +45,10 @@ define([ if (typeof options === "undefined") { var options = {}; } + this.id = options.id || undefined; + this.entityEl = options.entityEl || ""; + this.entityName = options.entityName || ""; + this.downloadEl = options.downloadEl || ""; }, /** @@ -64,12 +68,18 @@ define([ */ renderView: function () { try { - + var view = this; // Render the modal this.el.innerHTML = this.template({ - + }); + this.$(".entity-name").text(this.entityName); + + this.$(".entity-container").html(this.entityEl); + + this.$(".download-button-container").html(this.downloadEl); + } catch (e) { console.error("Failed to render the Entity Modal View: ", e); MetacatUI.appView.showAlert({ diff --git a/src/js/views/MetadataIndexView.js b/src/js/views/MetadataIndexView.js index 3d1bfc197..b48d4f29b 100644 --- a/src/js/views/MetadataIndexView.js +++ b/src/js/views/MetadataIndexView.js @@ -310,7 +310,7 @@ define(['jquery', return finalResult; }, - insertDataDetails: function(){ + getDataDetails: function(pid){ var view = this; //Get the Package Model - it is attached with the parent Metadata View @@ -325,6 +325,8 @@ define(['jquery', _.each(pkg.get("members"), function(solrResult, i){ if(solrResult.get("formatType") != "DATA") return; + if(solrResult.get("id") != pid) return; + solrResult.set("formattedSize", solrResult.bytesToSize()); //Add a section for the data details, just like the other attribute sections @@ -366,12 +368,8 @@ define(['jquery', $(html).append(entityDetailsSection); }); - //Glue together the header and attribute info section - var header = $(document.createElement("h4")).text("Data Table, Image, and Other Data Details"); - var section = $(html).prepend(header); - - //Insert into the DOM right after the "general" information - this.$(".General").after(section); + //Return the html element + return html; }, //Shows a message to the user that indicates this object has not been indexed diff --git a/src/js/views/MetadataView.js b/src/js/views/MetadataView.js index 4ad4c7940..1b9ae839a 100644 --- a/src/js/views/MetadataView.js +++ b/src/js/views/MetadataView.js @@ -79,6 +79,7 @@ define(['jquery', parentLinkContainer: "#parent-link-container", dataSourceContainer: "#data-source-container", articleContainer: "#article-container", + viewedEntities: new Array(), type: "Metadata", @@ -412,11 +413,12 @@ define(['jquery', // remove entity details from the response var responseObj = $(response); responseObj.find(".control-group.entity").remove(); + responseObj.find('h4:contains("Data Table, Image, and Other Data Details")').remove() // store entity details from the response var entityDetails = $(response).find(".control-group.entity"); - this.entityDetails = entityDetails; - console.log(this.entityDetails); + viewRef.entityDetails = entityDetails; + viewRef.storeEntityDetails(entityDetails); //Now show the response from the view service viewRef.$(viewRef.metadataContainer).html(responseObj); @@ -455,6 +457,17 @@ define(['jquery', this.insertCitationMetaTags(); }, + storeEntityDetails: function (entityDetails) { + this.entityDetails = new Object(); + var view = this; + + _.each(entityDetails, function(entity) { + var entityId = $(entity).find(".entitydetails").data("id"); + view.entityDetails[entityId] = entity; + }); + return; + }, + /* If there is no view service available, then display the metadata fields from the index */ renderMetadataFromIndex: function () { var metadataFromIndex = new MetadataIndex({ @@ -794,9 +807,6 @@ define(['jquery', this.insertPackageTable(options); } - //Insert the data details sections - this.insertDataDetails(); - // Get data package, if there is one, before checking write permissions if (packages.length) { this.getDataPackage(packages[0].get("id")); @@ -2063,20 +2073,20 @@ define(['jquery', }, /* - * Inserts new image elements into the DOM via the image template. Use for displaying images that are part of this metadata's resource map. + * Returns new image elements into the DOM via the image template. Use for displaying images that are part of this metadata's resource map. */ - insertDataDetails: function () { + getDataDetails: function (pid, entityEl) { //If there is a metadataIndex subview, render from there. var metadataFromIndex = _.findWhere(this.subviews, { type: "MetadataIndex" }); if (typeof metadataFromIndex !== "undefined") { _.each(this.packageModels, function (packageModel) { - metadataFromIndex.insertDataDetails(packageModel); + return metadataFromIndex.getDataDetails(); }); - return; } - var viewRef = this; + var viewRef = this, + container = entityEl; _.each(this.packageModels, function (packageModel) { @@ -2085,9 +2095,6 @@ define(['jquery', other = [], packageMembers = packageModel.get("members"); - //Don't do this for large packages - if (packageMembers.length > 150) return; - //==== Loop over each visual object and create a dataDisplay template for it to attach to the DOM ==== _.each(packageMembers, function (solrResult, i) { //Don't display any info about nested packages @@ -2098,18 +2105,14 @@ define(['jquery', if (objID == viewRef.pid) return; + if (objID != pid) + return; + //Is this a visual object (image)? var type = solrResult.type == "SolrResult" ? solrResult.getType() : "Data set"; if (type == "image") images.push(solrResult); - //Find the part of the HTML Metadata view that describes this data object - var anchor = $(document.createElement("a")).attr("id", objID.replace(/[^A-Za-z0-9]/g, "-")), - container = viewRef.findEntityDetailsContainer(objID); - - var downloadButton = new DownloadButtonView({ model: solrResult }); - downloadButton.render(); - //Insert the data display HTML and the anchor tag to mark this spot on the page if (container) { @@ -2149,13 +2152,6 @@ define(['jquery', } } - - $(container).prepend(anchor); - - var nameLabel = $(container).find("label:contains('Entity Name')"); - if (nameLabel.length) { - $(nameLabel).parent().after(downloadButton.el); - } } }); @@ -2219,6 +2215,8 @@ define(['jquery', var imgIntervalID = window.setInterval(initializeImgLightboxes, 500); } }); + + return container; }, replaceEcoGridLinks: function () { @@ -2437,8 +2435,59 @@ define(['jquery', else return false; - this.entityModal = new EntityModalView({id: id}); - this.subviews.push(this.entityModal); + var entityEl = undefined; + + Object.entries(this.entityDetails).forEach(([key, value]) => { + if (key == id) { + console.log("match found"); + console.log(value); + entityEl = value; + } + else if (key.startsWith("urn-uuid-") && key.slice(9) == id.slice(9)) { + entityEl = value; + } + }); + + var anotherEl = undefined; + if (this.viewedEntities.indexOf(id) < 0) { + anotherEl = this.getDataDetails(id, entityEl); + this.viewedEntities.push(id); + } + else { + anotherEl = entityEl; + } + + var downloadButton = undefined, + entityName = undefined, + viewRef = this; + + _.each(this.packageModels, function (packageModel) { + + var packageMembers = packageModel.get("members"); + + //==== Generate download button ==== + _.each(packageMembers, function (solrResult, i) { + if (solrResult.type == "Package") return; + + var objID = solrResult.get("id"); + + if (objID == viewRef.pid) + return; + + if (objID != id) + return; + + downloadButton = new DownloadButtonView({ model: solrResult }); + downloadButton.render(); + }); + }); + + entityName = this.getEntityName(anotherEl); + $(anotherEl).find(".control-label:contains('Entity Name') + .controls-well").parent().remove(); + + + this.entityModal = new EntityModalView({id: id, entityEl: anotherEl, entityName: entityName, downloadEl: downloadButton.el}); + this.subviews.push(this.entityModal, ); this.entityModal.render(); },