Hierarchical Checkbox Component

What I’m trying to do and Context:
Shamelessly trying to ripoff this hierarchical checkbox component, in an attempt to add one more brick in my Anvil arsenal, and eventually share the end product in the “Show and Tell” section.

What I’ve tried and what’s not working:
In the Server Code, there’s a single method being called on the client side:

@anvil.server.callable
def tree_example():  
  # Create tree object
  udo = Node("Udo")
  marc = Node("Marc", parent=udo)
  lian = Node("Lian", parent=marc)
  dan = Node("Dan", parent=udo)
  jet = Node("Jet", parent=dan)
  jan = Node("Jan", parent=dan)
  joe = Node("Joe", parent=dan)  
  # Print the tree
  print_tree(udo)
  # Create the JSON exporter object
  exporter = JsonExporter()
  # Create JSON Tree
  JSON_Tree = exporter.export(udo)
  # Stuff tree object into database as JSON object
  me = get_current_user()
  me['topic_hierarchy'] = JSON_Tree
  # Create importer
  importer = JsonImporter()  
  # Create new tree from JSON in Database 
  tree2 = importer.import_(me['topic_hierarchy'])
  # Print tree again
  print_tree(tree2)
  return JSON_Tree

Basically a test that I can create an anytree object, serialize it, and deserialize it from the Anvil database, so far so good.

What I’m struggling with is, I can’t use the anytree module on the client side, and I’m trying to build a custom UI component that can take advantage of the that module.

The general strategy I have is, construct an anytree object, serialize it into the anvil database, and then the custom Hierarchical checkbox component can deserialize it, and build itself.

I don’t really know how I can build an arbitrary anytree object from the client side, basically making a wrapper to the server when construction of the tree looks like this:

 from anytree import Node, RenderTree
 udo = Node("Udo")
 marc = Node("Marc")
 lian = Node("Lian", parent=marc)

Any suggestions on how to wrap this on the client side is greatly appreciated. The only other thought I have is build a JSON object client side, and then pass that into the server code.

Clone link:
https://anvil.works/build#clone:7CH7XR6GAMNBMWP7=RXZ2I2BPSQQZJBOR45AQANTG

See rough solution here:

1 Like