[WIP] Entity modal dialog

NCEAS · Aug 17, 2023 · c99b808 · c99b808
1 parent 741038f
commit c99b808
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 61 deletions.
diff --git 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;
-  }
+  }
+
+.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;
+}
diff --git a/src/js/templates/entityModal.html b/src/js/templates/entityModal.html
@@ -1,25 +1,33 @@
-<div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-        <i class="icon icon-on-left"></i> <b></b>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal">
-          &times;
-        </button>
-      </div>
-
-      <div class="modal-body">
-        <div
-          class="entity-container">
+<div class="form-horizontal">
+  <div class="entityDetails">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+        <div class="modal-header">
+          <strong class="entity-name"></strong>
+
+          <i class="icon icon-on-left"></i> <b></b>
+          <button
+            type="button"
+            class="close"
+            data-dismiss="modal">
+            &times;
+          </button>
+        </div>
+
+        <div class="modal-body">
+          <div
+            class="entity-container">
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <div
+            class="download-button-container">
+          </div>
         </div>
       </div>
-
-      <div class="modal-footer">
-      </div>
+      <!-- /.modal-content -->
     </div>
-    <!-- /.modal-content -->
+    <!-- /.modal-dialog -->
   </div>
-  <!-- /.modal-dialog -->
-
+</div>
diff --git 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
@@ -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
@@ -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();
         },