diff --git a/src/main/webapp/scripts/project/schema-alignment.js b/src/main/webapp/scripts/project/schema-alignment.js
index 020bdcbf9..db19719d2 100644
--- a/src/main/webapp/scripts/project/schema-alignment.js
+++ b/src/main/webapp/scripts/project/schema-alignment.js
@@ -91,10 +91,10 @@ SchemaAlignment._cleanName = function(s) {
}
function SchemaAlignmentDialog(protograph) {
- var protograph = {
+ this._originalProtograph = {
rootNodes: [
{
- nodeType: "existing",
+ nodeType: "cell-as-topic",
column: "name",
linkages: [
]
@@ -138,4 +138,94 @@ SchemaAlignmentDialog.prototype._renderBody = function(body) {
var self = this;
this._canvas = $('
').addClass("schema-alignment-dialog-canvas").appendTo(body);
+ this._nodeTable = $('').appendTo(this._canvas)[0];
+
+ for (var i = 0; i < this._originalProtograph.rootNodes.length; i++) {
+ new SchemaAlignmentDialog.UINode(
+ this._originalProtograph.rootNodes[i],
+ this._nodeTable,
+ true
+ );
+ }
+};
+
+SchemaAlignmentDialog.UINode = function(node, table, expanded) {
+ this._originalNode = node;
+ this._newNode = {
+ nodeType: node.nodeType
+ };
+ this._detailsRendered = false;
+
+ this._tr = table.insertRow(table.rows.length);
+ this._tdMain = this._tr.insertCell(0);
+ this._tdToggle = this._tr.insertCell(1);
+ this._tdDetails = this._tr.insertCell(2);
+
+ $(this._tdMain).addClass("schema-alignment-node-main").attr("width", "250");
+ $(this._tdToggle).addClass("schema-alignment-node-toggle").attr("width", "1%").hide();
+ $(this._tdDetails).addClass("schema-alignment-node-details").attr("width", "90%").hide();
+
+ this._renderMain();
+
+ this._expanded = expanded;
+ if (this._isExpandable()) {
+ this._showExpandable();
+ }
+};
+
+SchemaAlignmentDialog.UINode.prototype._isExpandable = function() {
+ return this._newNode.nodeType != "existing-content" && this._newNode.nodeType != "cell-as-content";
+};
+
+SchemaAlignmentDialog.UINode.prototype._renderMain = function() {
+ $(this._tdMain).empty().html(this._newNode.nodeType);
+};
+
+SchemaAlignmentDialog.UINode.prototype._showExpandable = function() {
+ $(this._tdToggle).show();
+ $(this._tdDetails).show();
+
+ if (this._detailsRendered) {
+ return;
+ }
+ this._detailsRendered = true;
+
+ this._collapsedDetailDiv = $('').appendTo(this._tdDetails).html("...");
+ this._expandedDetailDiv = $('').appendTo(this._tdDetails).html("details");
+
+ this._renderDetails();
+
+ var self = this;
+ var show = function() {
+ if (self._expanded) {
+ self._collapsedDetailDiv.hide();
+ self._expandedDetailDiv.show();
+ } else {
+ self._collapsedDetailDiv.show();
+ self._expandedDetailDiv.hide();
+ }
+ };
+ show();
+
+ $(this._tdToggle).html(" ");
+
+ $('
')
+ .attr("src", this._expanded ? "images/down-arrow.png" : "images/right-arrow.png")
+ .appendTo(this._tdToggle)
+ .click(function() {
+ self._expanded = !self._expanded;
+
+ $(this).attr("src", self._expanded ? "images/down-arrow.png" : "images/right-arrow.png");
+
+ show();
+ });
+};
+
+SchemaAlignmentDialog.UINode.prototype._hideExpandable = function() {
+ $(this._tdToggle).hide();
+ $(this._tdDetails).hide();
+};
+
+SchemaAlignmentDialog.UINode.prototype._renderDetails = function() {
+ var tableDetails = $('').appendTo(this._tdDetails)[0];
};
diff --git a/src/main/webapp/styles/schema-alignment-dialog.css b/src/main/webapp/styles/schema-alignment-dialog.css
index 48517e2dc..e94db0a41 100644
--- a/src/main/webapp/styles/schema-alignment-dialog.css
+++ b/src/main/webapp/styles/schema-alignment-dialog.css
@@ -2,4 +2,25 @@
height: 500px;
overflow: auto;
border: 1px solid #aaa;
-}
\ No newline at end of file
+}
+
+td.schema-alignment-node-main {
+ white-space: pre;
+ width: 300px;
+}
+
+td.schema-alignment-node-toggle {
+ white-space: pre;
+ width: 1%;
+}
+
+td.schema-alignment-node-toggle img {
+ cursor: pointer;
+ vertical-align: middle;
+ padding: 2px;
+}
+
+td.schema-alignment-node-details {
+ width: 90%;
+}
+