From 4a5b195e51971f8163621adca54db33e7523d258 Mon Sep 17 00:00:00 2001 From: Ashley Caselli Date: Fri, 11 Sep 2026 13:24:02 +0200 Subject: [PATCH 1/2] feat(display): say how many assertion statements are hidden MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit An assertion of ten or more statements is shown cut down to its first six, and the only sign of that was a small unlabelled arrow in the corner: nothing said that statements were missing, let alone how many. A shortened assertion therefore read as the whole assertion (issue #702). The arrow is replaced by a note at the bottom of the assertion — "(110 statements hidden, expand)" — whose count comes from what the collapse actually hid, and whose link expands it. Collapsing again brings the note back. The publication info section keeps its own arrow. Advanced statements, which the publish form hides until its "show more" mode, now keep a light rule down their left edge once that mode reveals them, so it stays visible which statements are normally out of the way. A negative margin offsets the rule, so a marked statement still lines up with the others. Rewriting the collapse also cleaned up its implicit globals and a stray statement, and replaced a call that never ran (it looked for .nanopub-graph inside the element that is the graph) with adjustValueWidths, which redoes the column alignment for the statements that just appeared — and, unlike calling updateNanopubGraph directly, sets the width limit it reads instead of throwing a ReferenceError on a narrow window. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01NnGpEQkFqCaf4AEQwwhFFn --- .../nanodash/component/NanopubItem.html | 2 +- .../nanodash/script/nanodash.js | 91 ++++++++++++++----- src/main/webapp/style.css | 25 +++++ 3 files changed, 93 insertions(+), 25 deletions(-) diff --git a/src/main/java/com/knowledgepixels/nanodash/component/NanopubItem.html b/src/main/java/com/knowledgepixels/nanodash/component/NanopubItem.html index fb78a6ff..5bd176a5 100644 --- a/src/main/java/com/knowledgepixels/nanodash/component/NanopubItem.html +++ b/src/main/java/com/knowledgepixels/nanodash/component/NanopubItem.html @@ -33,7 +33,7 @@
-
+
(, expand)
diff --git a/src/main/java/com/knowledgepixels/nanodash/script/nanodash.js b/src/main/java/com/knowledgepixels/nanodash/script/nanodash.js index efbcfeb1..b8cb1855 100644 --- a/src/main/java/com/knowledgepixels/nanodash/script/nanodash.js +++ b/src/main/java/com/knowledgepixels/nanodash/script/nanodash.js @@ -553,46 +553,89 @@ 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').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; }); + 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.hide(); + return; + } + note.find(".hidden-statements-count").text( + hiddenCount === 1 ? "1 statement hidden" : hiddenCount + " statements hidden"); + note.show(); } function showMore(el) { diff --git a/src/main/webapp/style.css b/src/main/webapp/style.css index 27e1f5e6..592d366a 100644 --- a/src/main/webapp/style.css +++ b/src/main/webapp/style.css @@ -2546,6 +2546,21 @@ 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; + margin: 8px 3px 2px 3px; + color: #666; + font-size: 10pt; +} + +.hidden-statements a { + color: #0B73DA; + cursor: pointer; +} + .listcomponent { position: relative; } @@ -3284,6 +3299,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; From 05a514b90d703dacd740c623563b5f626c057dd1 Mon Sep 17 00:00:00 2001 From: Ashley Caselli Date: Fri, 11 Sep 2026 13:41:33 +0200 Subject: [PATCH 2/2] feat(display): keep the expand arrow, with the count beside it The note replaced the arrow at the bottom of a collapsed assertion; keeping the arrow and labelling it says the same thing without moving the control readers already know. The count now sits immediately left of the arrow, vertically centred on it, and is itself the expand link. It is shown and hidden by a class rather than by jQuery's show/hide, which would overwrite the flex layout the row needs. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01NnGpEQkFqCaf4AEQwwhFFn --- .../knowledgepixels/nanodash/component/NanopubItem.html | 3 ++- .../java/com/knowledgepixels/nanodash/script/nanodash.js | 8 +++++--- src/main/webapp/style.css | 9 ++++++++- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/main/java/com/knowledgepixels/nanodash/component/NanopubItem.html b/src/main/java/com/knowledgepixels/nanodash/component/NanopubItem.html index 5bd176a5..926a8030 100644 --- a/src/main/java/com/knowledgepixels/nanodash/component/NanopubItem.html +++ b/src/main/java/com/knowledgepixels/nanodash/component/NanopubItem.html @@ -33,7 +33,8 @@
-
(, expand)
+
+
diff --git a/src/main/java/com/knowledgepixels/nanodash/script/nanodash.js b/src/main/java/com/knowledgepixels/nanodash/script/nanodash.js index b8cb1855..0deace78 100644 --- a/src/main/java/com/knowledgepixels/nanodash/script/nanodash.js +++ b/src/main/java/com/knowledgepixels/nanodash/script/nanodash.js @@ -568,7 +568,8 @@ var COLLAPSED_STATEMENT_COUNT = 6; function expandAssertion(el) { const assertion = $(el).closest('.nanopub-assertion'); assertion.find('.nanopub-statement, .nanopub-group, hr').show(); - assertion.find('.hidden-statements').hide(); + assertion.find('.hidden-statements').removeClass('shown'); + assertion.find('.expand').first().hide(); assertion.find('.collapse').first().show(); adjustValueWidths(); } @@ -616,6 +617,7 @@ function collapseNanopubAssertion(el) { } if (isStatement) shown = shown + 1; }); + assertion.find(".expand").first().show(); showHiddenStatementsNote(assertion, hidden); } @@ -630,12 +632,12 @@ function showHiddenStatementsNote(assertion, hiddenCount) { const note = assertion.find(".hidden-statements").first(); if (note.length === 0) return; if (hiddenCount < 1) { - note.hide(); + note.removeClass("shown"); return; } note.find(".hidden-statements-count").text( hiddenCount === 1 ? "1 statement hidden" : hiddenCount + " statements hidden"); - note.show(); + note.addClass("shown"); } function showMore(el) { diff --git a/src/main/webapp/style.css b/src/main/webapp/style.css index 592d366a..1d7d3d1d 100644 --- a/src/main/webapp/style.css +++ b/src/main/webapp/style.css @@ -2551,11 +2551,18 @@ span.internal { Filled and shown by collapseNanopubAssertion() in nanodash.js. */ .hidden-statements { display: none; - margin: 8px 3px 2px 3px; + 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;