Data & Views

If you have a data member in your class, you can decorate it with @Show and it will be visible in the playground! For example, check out the code for Average Stock Price, and you will see that we have decorated averagePrice with @Show. That’s why it shows up here:

You can decorate as many data members you want, event private ones!

Customizing how the data is presented

Say if you have a class which you are using to model a database. It has a member called data, which you’d want to decorate with @Show.

type Order = {
	id: string;
	thing: string;
	status: string;
	createdAt: number;
};

class OrdersTable {
	@Show
	private data: Order[] = [];
}

This simply displays that array in playground. Wouldn’t it be nice if data could actually be rendered as a table?

Table View

Well, yes! That’s why we have @Table, which you can decorate your class with. Simply provide the “columns” you want to show and you get a nice looking view! For example:

Code
View

@Table(['id', 'thing', 'status', 'createdAt'])
class OrdersTable {
  @Show
  private data: Order[] = [];
}

This view takes the liberty of setting the icon as Postgres. You can change that to anything.

With table view, only one member should be decorated with @Show and it should be an array of records.

Collection View

Similarly, we have @Collection to show objects. For example:

Code
View

@Collection
class OrdersTable {
  @Show
  private data: Order[] = [];
}

With collection view, only one member should be decorated with @Show and it should be an array of records.

KeyValue View

And lastly, you can use @KeyValue to render a Map. For example:

Code
View

@KeyValue
class Redis<T> {
  @Show
  data: Map<string, T> = new Map();
}

With keyvalue view, only one member should be decorated with @Show and it should be a Map.

Where did all the methods go?

When you assign a view to a class, the runtime collapses its corresponding node. All the methods are hidden, and all the edges going to those methods now go to the parent class node. Giving the view a clean look. Mind you, simply decorating a member with @Show won’t cause this. You have to assign a view to the class.

Get Started

Dependencies & Scope

Internals

Async Operations

Visual Storytelling

Utils

Customizing how the data is presented

Table View

Collection View

KeyValue View

Where did all the methods go?

​Customizing how the data is presented

​Table View

​Collection View

​KeyValue View

​Where did all the methods go?

Customizing how the data is presented

Table View

Collection View

KeyValue View

Where did all the methods go?