Skip to content

Commit

Permalink
[WIP] Entity modal dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@rushirajnenuji
rushirajnenuji committed Aug 17, 2023
1 parent 741038f commit c99b808
Show file tree
Hide file tree
Showing 5 changed files with 137 additions and 61 deletions.
13 changes: 12 additions & 1 deletion src/css/metacatui-common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
50 changes: 29 additions & 21 deletions src/js/templates/entityModal.html
View file
Original file line number Diff line number Diff line change
@@ -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>
16 changes: 13 additions & 3 deletions src/js/views/EntityModalView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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 || "";
},

/**
Expand All @@ -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({
Expand Down
12 changes: 5 additions & 7 deletions src/js/views/MetadataIndexView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
107 changes: 78 additions & 29 deletions src/js/views/MetadataView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ define(['jquery',
parentLinkContainer: "#parent-link-container",
dataSourceContainer: "#data-source-container",
articleContainer: "#article-container",
viewedEntities: new Array(),

type: "Metadata",

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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"));
Expand Down Expand Up @@ -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) {

Expand All @@ -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
Expand All @@ -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) {

Expand Down Expand Up @@ -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);
}
}

});
Expand Down Expand Up @@ -2219,6 +2215,8 @@ define(['jquery',
var imgIntervalID = window.setInterval(initializeImgLightboxes, 500);
}
});

return container;
},

replaceEcoGridLinks: function () {
Expand Down Expand Up @@ -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();
},

Expand Down

0 comments on commit c99b808

Please sign in to comment.