Introducing the Holochain Playground

Learning Library
#1

Hi everyone!

I’m sharing a new little experiment I did as a side-project, see if it’s useful:

https://holochain-open-dev.github.io/holochain-playground/

It’s a playground/simulation of a holochain DHT, with internal mechanics of holochain. You can see the state of each node, and also commit entries to see how CRUD works. Its goal is to improve the understanding of holochain internals for beginners and advanced devs alike, and use it as a teaching resource/happ design sandbox.

I’m trying to gather feedback to see if something can be improved or what new features would be useful (right now I’m thinking animations and entry graph), so criticize away please!

For now I propose a little game to see if you can prove your holochain knowledge: go to a node, commit two entries, link those entries together, and then find in the DHT where the link is stored in the base entry’s metadata. It’s a little hidden, but it’s there!

Fins aviat!

19 Likes
#2

Wow! @guillemcordoba that’s wonderful! No time to play the game now, but as soon as I get out from under a pile of work…

#3

Wow, cool playground! Thanks Guillem :slight_smile:

I gave it a spin with my archetecture practice, unfortunately I could not commit an entry even :sweat_smile:

I used the following, perhaps you can point out whats failing?

Entry "profile" {
    Model: struct profile {
        agentAddress: 'address',
        firstName: 'string',
        lastName: 'base64',
        email: 'string',
        country: 'string',
        last_header_address: Option<Address>,
    }
}

I tired a simplifying to various degrees but no luck, just an error saying “bad JSON” - any suggestions? or have you a model we can start manipulating?

Cheers,
J

1 Like
#4

So you need to input JSON objects only. In your case, the JSON object would be like:

{ 
  "agentAddress": "AGENT_ADDRESS",
  "firstName": "Guillem"
...
}
2 Likes
#5

Booyeah, I found my own name in the DHT :slight_smile:

By playing in this sandbox I noticed I have to loose the last comma of the JSON and that I have to use “quotations” rather than ‘apostrophises’. I also realised the JSON needs to have the first half in “quotations”… Does that mean my entry syntax needs to look like this:

Entry "profile" {
Model: struct profile {
    "agentAddress": "address",
    "firstName": "string",
    "lastName": "base64",
    "email": "string",
    "country": "string",
    "last_header_address": "Option<Address>"
}

}

Cheers
Josh

1 Like
#6

No no, this is how the JSON syntax works. In the Model: struct we are using Rust’s syntax, so everything fine on your side.

3 Likes
#7

Ok yeah - so I dont need the quotations, good to know! :slight_smile:

1 Like
#8

This is a great explanation tool, thank you Guillem !

1 Like
#9

I just updated it with a designer mode, intended for designers and developers to specify what is in the entries of the app and how they relate with one another.

There are a couple UX issues, I want to fix them soon. Let me know what you think and if you have any feedback!

1 Like
#10

It’s awesome, good job! I just did my first contribution, it’s very small in terms of code but I think important for the UX: https://github.com/holochain-open-dev/holochain-playground/pull/1

#11

Awesome, merged :slight_smile: thanks!

1 Like
#12

Unfortunately, I think that might have broken something? Just me perhaps?

Screenshot 2020-04-06 at 23.01.14
Screenshot 2020-04-06 at 23.01.141392×693 64.4 KB

#13

Not just you, it seems this little guy persists… You can click one entry to reposition everything as a workaround until I push a fix

#14

Should be fixed now, let me know if this persists.

1 Like
#15

It works better but i can still notice some errors in the console when i click upon the nodes: Uncaught (in promise) TypeError: Cannot read property ‘x1’ of undefined

#16

Thanks, yes I know, it’s a weird glitch but doesn’t affect the UI, so low prio for now.

#17

Oh wow @guillemcordoba, this is really neat. I’ve done just a bit of messing around and it’s really useful to understand how it works! Great for newcomers, I wager!

#18

Glad you like it! Give me any feedback as far as understanding what is doing what goes! Would you have liked some more explanation about a specific topic/functionality?

#19

Sure! I’m a bit of a newbie when it comes to Holochain but it is an awesome visual representation of the core functionalities. I personally like the technical view with the DHT shard and source chain to see how it actually evolves over time.

I recently came across anchors (and all that jazz about anchor trees). I don’t think you should be focusing on it because it’s just a tiny detail and it’s, after all, a pattern rather than core functionality but I think it’d be interesting to see a way to actually create anchors and link entries to these and see this progress play out in the source chain and DHT (visually).

But that’s nitpicking! I think it’s a really interesting idea and well implemented. Huge props! I might mess around with the source code to help whenever I can (I’m still a newbie tho :stuck_out_tongue:)

#20

Hum okey! You can create anything you want in the playground right now, including anchors. This would look something like:

  1. Create an anchor entry, with these contents: {"anchor_type": "username", "anchor_text": "guillemcordoba"}
  2. Get the address of that entry, and an address for any agentId entry, and link them together.

You can repeat this process any number of times to see what the anchor linked to multiple entries would look like. Maybe this is easier to do in designer mode.

1 Like