diff --git a/src/main/java/com/knowledgepixels/nanodash/component/NanopubItem.html b/src/main/java/com/knowledgepixels/nanodash/component/NanopubItem.html
index fb78a6ff..926a8030 100644
--- a/src/main/java/com/knowledgepixels/nanodash/component/NanopubItem.html
+++ b/src/main/java/com/knowledgepixels/nanodash/component/NanopubItem.html
@@ -33,6 +33,7 @@
+
diff --git a/src/main/java/com/knowledgepixels/nanodash/script/nanodash.js b/src/main/java/com/knowledgepixels/nanodash/script/nanodash.js
index efbcfeb1..0deace78 100644
--- a/src/main/java/com/knowledgepixels/nanodash/script/nanodash.js
+++ b/src/main/java/com/knowledgepixels/nanodash/script/nanodash.js
@@ -553,46 +553,91 @@ function collapsePubinfo(el) {
$($(el).parent().find('.expand')[0]).show();
}
+/**
+ * An assertion of this many statements or more is shown collapsed, down to
+ * COLLAPSED_STATEMENT_COUNT statements plus a note saying how many are hidden.
+ */
+var COLLAPSE_THRESHOLD = 10;
+var COLLAPSED_STATEMENT_COUNT = 6;
+
+/**
+ * Shows all of a collapsed assertion's statements.
+ *
+ * @param el an element inside the assertion, typically the note's expand link
+ */
function expandAssertion(el) {
- $(el).closest('.nanopub-assertion').find('.nanopub-statement, .nanopub-group, hr').each(function () {
- $(this).show();
- });
- $(el).hide();
- $($(el).parent().find('.collapse')[0]).show();
- $(el).parent().find(".nanopub-graph").each(function () {
- updateNanopubGraph(this);
- });
+ const assertion = $(el).closest('.nanopub-assertion');
+ assertion.find('.nanopub-statement, .nanopub-group, hr').show();
+ assertion.find('.hidden-statements').removeClass('shown');
+ assertion.find('.expand').first().hide();
+ assertion.find('.collapse').first().show();
+ adjustValueWidths();
}
+/**
+ * Collapses an expanded assertion back to its first statements and its note.
+ *
+ * @param el an element inside the assertion, typically the collapse button
+ */
function collapseAssertion(el) {
- collapseNanopubAssertion($(el).closest('.nanopub-view'));
- $(el).hide();
- $($(el).parent().find('.expand')[0]).show();
+ const assertion = $(el).closest('.nanopub-assertion');
+ assertion.find('.collapse').first().hide();
+ collapseNanopubAssertion(assertion.closest('.nanopub-view'));
+ adjustValueWidths();
}
+/**
+ * Collapses the long assertions of every nanopublication on the page.
+ */
function collapseNanopubAssertions() {
$(".nanopub-view").each(function () {
collapseNanopubAssertion($(this));
});
}
+/**
+ * Collapses one nanopublication's assertion when it has enough statements for the
+ * shortening to be worth it, and tells the reader how many it is holding back.
+ *
+ * @param el the nanopublication view holding the assertion
+ */
function collapseNanopubAssertion(el) {
- a = $(el).find(".nanopub-assertion")[0];
- n = $(a).find(".nanopub-statement").length;
- $
- if (n < 10) return;
- $($(a).find(".expand")[0]).show();
- c = 0;
- $(a).find(".nanopub-statement, .nanopub-group, hr").each(function () {
- if (c > 5) {
- $(this).hide();
- } else {
+ const assertion = $(el).find(".nanopub-assertion").first();
+ if (assertion.length === 0) return;
+ if (assertion.find(".nanopub-statement").length < COLLAPSE_THRESHOLD) return;
+ let shown = 0;
+ let hidden = 0;
+ assertion.find(".nanopub-statement, .nanopub-group, hr").each(function () {
+ const isStatement = $(this).hasClass("nanopub-statement");
+ if (shown < COLLAPSED_STATEMENT_COUNT) {
$(this).show();
+ } else {
+ $(this).hide();
+ if (isStatement) hidden = hidden + 1;
}
- if ($(this).hasClass("nanopub-statement")) {
- c = c + 1;
- }
+ if (isStatement) shown = shown + 1;
});
+ assertion.find(".expand").first().show();
+ showHiddenStatementsNote(assertion, hidden);
+}
+
+/**
+ * Says at the bottom of the assertion how many statements the collapse is holding
+ * back, so that a shortened assertion does not read as the whole of it.
+ *
+ * @param assertion the assertion element, as a jQuery object
+ * @param hiddenCount how many statements are hidden; none leaves the note off
+ */
+function showHiddenStatementsNote(assertion, hiddenCount) {
+ const note = assertion.find(".hidden-statements").first();
+ if (note.length === 0) return;
+ if (hiddenCount < 1) {
+ note.removeClass("shown");
+ return;
+ }
+ note.find(".hidden-statements-count").text(
+ hiddenCount === 1 ? "1 statement hidden" : hiddenCount + " statements hidden");
+ note.addClass("shown");
}
function showMore(el) {
diff --git a/src/main/webapp/style.css b/src/main/webapp/style.css
index 27e1f5e6..1d7d3d1d 100644
--- a/src/main/webapp/style.css
+++ b/src/main/webapp/style.css
@@ -2546,6 +2546,28 @@ span.internal {
background-image: url("images/down-arrow.svg");
}
+/* Note at the bottom of a collapsed assertion, saying how many statements the
+ collapse is holding back, so a shortened assertion does not read as all of it.
+ Filled and shown by collapseNanopubAssertion() in nanodash.js. */
+.hidden-statements {
+ display: none;
+ align-items: center;
+ justify-content: flex-end;
+ min-height: 54px;
+ padding-right: 60px;
+ color: #666;
+ font-size: 10pt;
+}
+
+.hidden-statements.shown {
+ display: flex;
+}
+
+.hidden-statements a {
+ color: #0B73DA;
+ cursor: pointer;
+}
+
.listcomponent {
position: relative;
}
@@ -3284,6 +3306,16 @@ a.source:hover {
display: revert !important;
}
+/* An advanced statement the mode toggle has revealed keeps a light rule down its
+ left edge, so that it stays recognizable as one of the statements that are
+ normally out of the way. The negative margin offsets the border and padding, so
+ the marked statement lines up with the others (issue #702). */
+body.mode-advanced .nanopub-graph .advanced {
+ border-left: 2px solid #DDE4EC;
+ margin-left: -10px;
+ padding-left: 8px;
+}
+
.mode-toggle-button {
border: none;
background: #ffffff;