std-cache-aside

Level: Atom | Entity: CacheEntry | Persistence: runtime

3 states, 5 events, 7 transitions

Live Preview

orbital CacheEntryOrbital {
  entity CacheEntry [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
    hitCount : number
    cacheAge : number
  }
  trait CacheEntryCacheManager -> CacheEntry [interaction] {
    initial: empty
    state empty {
      INIT -> empty
        (fetch CacheEntry)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "database", size: "lg" }, { type: "typography", content: "CacheEntrys Cache", variant: "h2" }] }, { type: "button", label: "Fetch", event: "FETCH", variant: "primary", icon: "download" }] }, { type: "status-dot", status: "inactive", pulse: false, label: "Empty" }] }, { type: "divider" }, { type: "empty-state", icon: "inbox", title: "Cache is empty", description: "Fetch data to populate the cache." }] })
      FETCH -> cached
        (fetch CacheEntry)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "database", size: "lg" }, { type: "typography", content: "CacheEntrys Cache", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "status-dot", status: "success", pulse: false, label: "Cached" }, { type: "button", label: "Invalidate", event: "INVALIDATE", variant: "ghost", icon: "trash" }] }] }, { type: "divider" }, { type: "simple-grid", columns: 2, children: [{ type: "stat-display", label: "Hit Count", value: ["object/get", ["array/first", "@entity"], "hitCount"] }, { type: "stat-display", label: "Cache Age", value: ["object/get", ["array/first", "@entity"], "cacheAge"] }] }, { type: "data-grid", entity: "CacheEntry", emptyIcon: "inbox", emptyTitle: "Cache is empty", emptyDescription: "Fetch data to populate the cache.", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "stack", direction: "horizontal", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "database", size: "sm" }, { type: "typography", variant: "h4", content: "@item.name" }] }, { type: "badge", label: "@item.description" }] }, { type: "typography", variant: "caption", content: "@item.status" }] }] }] })
    }
    state cached {
      INIT -> cached
        (fetch CacheEntry)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "database", size: "lg" }, { type: "typography", content: "CacheEntrys Cache", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "status-dot", status: "success", pulse: false, label: "Cached" }, { type: "button", label: "Invalidate", event: "INVALIDATE", variant: "ghost", icon: "trash" }] }] }, { type: "divider" }, { type: "simple-grid", columns: 2, children: [{ type: "stat-display", label: "Hit Count", value: ["object/get", ["array/first", "@entity"], "hitCount"] }, { type: "stat-display", label: "Cache Age", value: ["object/get", ["array/first", "@entity"], "cacheAge"] }] }, { type: "data-grid", entity: "CacheEntry", emptyIcon: "inbox", emptyTitle: "Cache is empty", emptyDescription: "Fetch data to populate the cache.", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "stack", direction: "horizontal", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "database", size: "sm" }, { type: "typography", variant: "h4", content: "@item.name" }] }, { type: "badge", label: "@item.description" }] }, { type: "typography", variant: "caption", content: "@item.status" }] }] }] })
      CACHED -> cached
        (persist update CacheEntry @payload.data)
        (fetch CacheEntry)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "database", size: "lg" }, { type: "typography", content: "CacheEntrys Cache", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "status-dot", status: "success", pulse: false, label: "Cached" }, { type: "button", label: "Invalidate", event: "INVALIDATE", variant: "ghost", icon: "trash" }] }] }, { type: "divider" }, { type: "simple-grid", columns: 2, children: [{ type: "stat-display", label: "Hit Count", value: ["object/get", ["array/first", "@entity"], "hitCount"] }, { type: "stat-display", label: "Cache Age", value: ["object/get", ["array/first", "@entity"], "cacheAge"] }] }, { type: "data-grid", entity: "CacheEntry", emptyIcon: "inbox", emptyTitle: "Cache is empty", emptyDescription: "Fetch data to populate the cache.", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "stack", direction: "horizontal", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "database", size: "sm" }, { type: "typography", variant: "h4", content: "@item.name" }] }, { type: "badge", label: "@item.description" }] }, { type: "typography", variant: "caption", content: "@item.status" }] }] }] })
        (notify "CacheEntry updated successfully")
      INVALIDATE -> stale
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "database", size: "lg" }, { type: "typography", content: "CacheEntrys Cache", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "status-dot", status: "warning", pulse: true, label: "Stale" }, { type: "button", label: "Refresh", event: "REFRESH", variant: "primary", icon: "refresh-cw" }] }] }, { type: "divider" }, { type: "alert", variant: "warning", message: "Cache data is stale. Refresh to get the latest data." }, { type: "data-grid", entity: "CacheEntry", emptyIcon: "inbox", emptyTitle: "Cache is empty", emptyDescription: "Fetch data to populate the cache.", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "stack", direction: "horizontal", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "database", size: "sm" }, { type: "typography", variant: "h4", content: "@item.name" }] }, { type: "badge", label: "@item.description" }] }, { type: "typography", variant: "caption", content: "@item.status" }] }] }] })
    }
    state stale {
      REFRESH -> cached
        (fetch CacheEntry)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "database", size: "lg" }, { type: "typography", content: "CacheEntrys Cache", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "status-dot", status: "success", pulse: false, label: "Cached" }, { type: "button", label: "Invalidate", event: "INVALIDATE", variant: "ghost", icon: "trash" }] }] }, { type: "divider" }, { type: "simple-grid", columns: 2, children: [{ type: "stat-display", label: "Hit Count", value: ["object/get", ["array/first", "@entity"], "hitCount"] }, { type: "stat-display", label: "Cache Age", value: ["object/get", ["array/first", "@entity"], "cacheAge"] }] }, { type: "data-grid", entity: "CacheEntry", emptyIcon: "inbox", emptyTitle: "Cache is empty", emptyDescription: "Fetch data to populate the cache.", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "stack", direction: "horizontal", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "database", size: "sm" }, { type: "typography", variant: "h4", content: "@item.name" }] }, { type: "badge", label: "@item.description" }] }, { type: "typography", variant: "caption", content: "@item.status" }] }] }] })
      FETCH -> cached
        (fetch CacheEntry)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "database", size: "lg" }, { type: "typography", content: "CacheEntrys Cache", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "status-dot", status: "success", pulse: false, label: "Cached" }, { type: "button", label: "Invalidate", event: "INVALIDATE", variant: "ghost", icon: "trash" }] }] }, { type: "divider" }, { type: "simple-grid", columns: 2, children: [{ type: "stat-display", label: "Hit Count", value: ["object/get", ["array/first", "@entity"], "hitCount"] }, { type: "stat-display", label: "Cache Age", value: ["object/get", ["array/first", "@entity"], "cacheAge"] }] }, { type: "data-grid", entity: "CacheEntry", emptyIcon: "inbox", emptyTitle: "Cache is empty", emptyDescription: "Fetch data to populate the cache.", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "stack", direction: "horizontal", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "database", size: "sm" }, { type: "typography", variant: "h4", content: "@item.name" }] }, { type: "badge", label: "@item.description" }] }, { type: "typography", variant: "caption", content: "@item.status" }] }] }] })
    }
  }
  page "/cacheentrys" -> CacheEntryCacheManager
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-
hitCount	number	0
cacheAge	number	0

States

State	Type
empty	Initial
cached	-
stale	-

Events

Event	Payload
INIT	-
FETCH	-
CACHED	data: object
INVALIDATE	-
REFRESH	-

Transitions

From	Event	To	Effects
empty	INIT	empty	2 effects
empty	FETCH	cached	2 effects
cached	INIT	cached	2 effects
cached	CACHED	cached	4 effects
cached	INVALIDATE	stale	1 effect
stale	REFRESH	cached	2 effects
stale	FETCH	cached	2 effects