feat(display): say how many assertion statements are hidden

src/main/java/com/knowledgepixels/nanodash/component/NanopubItem.html

@@ -33,6 +33,7 @@
         <div wicket:id="unused-assertion-statements">
           <div wicket:id="unused-assertion-statement"></div>
         </div>
+        <div class="hidden-statements"><a href="#" onclick="expandAssertion(this); return false;"><span class="hidden-statements-count"></span></a></div>
         <div class="expand" onclick="expandAssertion(this);"></div>
         <div class="collapse" onclick="collapseAssertion(this);"></div>
       </div>

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) {

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;