Merge pull request #37 from disberd/bondatble_collapsed

src/PlutoExtras.jl

@@ -19,6 +19,8 @@ end
 export Editable, StringOnEnter # from basic_widgets.jl
 export ToggleReactiveBond # From within StructBondModule
 
+include("helpers.jl")
+
 include("combine_htl/PlutoCombineHTL.jl")
 
 include("basic_widgets.jl")

src/helpers.jl

@@ -0,0 +1,12 @@
+# This function is an internal helper that returns just the letters (without numbers and dashes) of the currently running cell id. Returns a random string of 10 letters in case the currently running cell id can not be parsed. Mostly used to produce consistent ids for javascript scripts in Pluto
+function cell_id_letters(limit = 10)
+    fallback = String(rand('a':'z', 10))
+    isdefined(Main, :PlutoRunner) || return fallback
+    isdefined(Main.PlutoRunner, :currently_running_cell_id) || return fallback
+    ref = Main.PlutoRunner.currently_running_cell_id
+    (ref isa Ref && isassigned(ref)) || return fallback
+    uuid = ref[]
+    # Return up to `limit` characters
+    str = replace(string(uuid), r"[\d-]" => "")
+    return first(str, limit)
+end

src/structbond/StructBondModule.jl

@@ -5,6 +5,7 @@ module StructBondModule
     import REPL: fielddoc
     using HypertextLiteral
     using PlutoUI: combine
+    using ..PlutoExtras: cell_id_letters
 
     export BondTable, StructBond, @NTBond, @BondsList, Popout, @popoutasfield,
     @typeasfield, popoutwrap, @fieldbond, @fielddescription, @fielddata

src/structbond/main_definitions.jl

@@ -389,13 +389,21 @@ _getbond(x::Popout) = _getbond(x.element)
 
 # BondTable #
 """
-	BondTable(bondarray; description)
+	BondTable(bondarray; description, collapsed)
 Take as input an array of bonds and creates a floating table that show all the
 bonds in the input array. 
 
 If `description` is not provided, it defaults to the text *BondTable*.
 Description can be either a string or a HTML output.
 
+The optional `collapsed` kwarg can be used to specify whether the BondTable
+should stay collapsed or not when shown. If not provided, the BondTable will
+*not* be collapsed.
+
+The *collapsed* status of the BondTable is persistent across reactive runs of
+the cell showing the BondTable.
+
+
 See also: [`StructBond`](@ref), [`Popout`](@ref), [`popoutwrap`](@ref),
 [`@fieldbond`](@ref), [`@fielddescription`](@ref), [`@fieldhtml`](@ref),
 [`@typeasfield`](@ref), [`@popoutasfield`](@ref)
@@ -404,13 +412,14 @@ Base.@kwdef struct BondTable
 	bonds::Array
 	description::Any
 	secret_key::String
-	function BondTable(v::Array; description = NotDefined(), secret_key = String(rand('a':'z', 10)))
+	collapsed::Union{Bool, Nothing}
+	function BondTable(v::Array; description = NotDefined(), secret_key = cell_id_letters(), collapsed = nothing)
 		for el in v
 			T = typeof(el)
 			valid = el isa BondsList || nameof(T) == :Bond && hasfield(T, :element) && hasfield(T, :defines)
 			valid || error("All the elements provided as input to a `BondTable` have to be bonds themselves (i.e. created with the `@bind` macro from Pluto)")
 		end
-		new(v, description, secret_key)
+		new(v, description, secret_key, collapsed)
 	end
 end
 
@@ -469,10 +478,10 @@ bondtable_style = @htl """
 """;
 
 ## Show - BondTable ##
-function show_bondtable(b::BondTable; description = b.description)
+function show_bondtable(b::BondTable; description = b.description, collapsed = b.collapsed)
 	desc = description isa NotDefined ? "BondTable" : description
 	@htl("""
-	<bondtable-container key='$(b.secret_key)'>
+	<bondtable-container key='$(b.secret_key)' class='collapsed'>
 		<bondtable-header>
 			<span class='table-help icon'></span>
 			<span class='description'>$desc</span>
@@ -483,19 +492,29 @@ function show_bondtable(b::BondTable; description = b.description)
 		</bondtable-contents>
 	</bondtable-container>
 	<script id='$(b.secret_key)'>
-		const container = currentScript.previousElementSibling
+		const container = currentScript.parentElement.querySelector('bondtable-container')
 		const header = container.firstElementChild
 		const contents = container.lastElementChild
 
 		const cell = container.closest('pluto-cell')
 
-		
+        // This is only used to leverage the pluto js functionality for persistency in JS
+        const return_element = this ?? html`<span class='script-return'></span>`
+
+        if (return_element.collapsed === undefined) {
+            return_element.collapsed = $collapsed ?? false
+        }
+
 		const help_btn = header.firstElementChild
 		const collapse_btn = header.lastElementChild
 
 		container.collapse = (force) => {
-			container.classList.toggle('collapsed', force)
+            return_element.collapsed = force ?? !return_element.collapsed
+			container.classList.toggle('collapsed', return_element.collapsed)
 		}
+        // Force the initial status
+        container.collapse(return_element.collapsed)
+
 		collapse_btn.onclick = e => container.collapse()
 
 		// Load the interact script
@@ -513,6 +532,8 @@ function show_bondtable(b::BondTable; description = b.description)
 			cell.scrollIntoView()
 		}
 		help_btn.onclick = container.jumpToCell
+
+        return return_element
 	</script>
 	$bondtable_style
 	""")