initialUnseen = 11
actions = [
loadPageAction(0),
markSeenAction(0),
loadPageAction(1)
]
loadPageAction = function (pageNumber) {
return {
name: `Load page ${pageNumber + 1}`,
action: () => {
mutable loadedPosts = mutable loadedPosts.concat(
apiSort(mutable apiPosts).filter(
(p, i) => (i >= pageNumber * postsPerPage) && (i < (pageNumber + 1) * postsPerPage)
)
)
}
}
}
markSeenAction = function (pageNumber) {
return {
name: `Mark as seen the posts on page ${pageNumber + 1}`,
action: () => {
mutable apiPosts = mutable apiPosts.map((post, i) => ({
...post,
unseen: (i >= pageNumber * postsPerPage) && (i < (pageNumber + 1) * postsPerPage) ? false : post.unseen
}))
}
}
}
apiSort = function (posts) {
return posts.toSorted((post1, post2) => {
if (!post1.unseen && post2.unseen) {
return 1;
} else if (post1.unseen && !post2.unseen) {
return -1;
}
return 0;
})
}
mutable eyeIndex = 42;
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
