@livestore/livestore 0.0.19 → 0.0.22

package/src/reactive.ts

@@ -6,8 +6,8 @@
 // Effect: a side effect that runs when a value changes; return value is ignored
 // Atom: a node returning a value that can be depended on: Ref | Thunk
 
-// Super computation: Nodes that depend on a given node
-// Sub computation: Nodes that a given node depends on
+// Super computation: Nodes that depend on a given node ("downstream")
+// Sub computation: Nodes that a given node depends on ("upstream")
 
 // This vocabulary comes from the MiniAdapton paper linked below, although
 // we don't actually implement the MiniAdapton algorithm because we don't need lazy recomputation.
@@ -26,76 +26,81 @@
 import type { PrettifyFlat } from '@livestore/utils'
 import { pick } from '@livestore/utils'
 import type * as otel from '@opentelemetry/api'
-import { isEqual, max, uniqueId } from 'lodash-es'
+import { isEqual, uniqueId } from 'lodash-es'
 
 import { BoundArray } from './bounded-collections.js'
+// import { getDurationMsFromSpan } from './otel.js'
 
-const NOT_REFRESHED_YET = Symbol.for('NOT_REFRESHED_YET')
-type NOT_REFRESHED_YET = typeof NOT_REFRESHED_YET
+export const NOT_REFRESHED_YET = Symbol.for('NOT_REFRESHED_YET')
+export type NOT_REFRESHED_YET = typeof NOT_REFRESHED_YET
 
-export type GetAtom = <T>(atom: Atom<T>) => T
+export type GetAtom = <T>(atom: Atom<T, any, any>, otelContext?: otel.Context) => T
 
-export type Ref<T> = {
+export type Ref<T, TContext, TDebugRefreshReason extends Taggable> = {
   _tag: 'ref'
   id: string
-  result: T
-  height: 0
-  getResult: () => T
-  sub: Set<Atom<any>> // always empty
-  super: Set<Atom<any> | Effect>
+  isDirty: false
+  previousResult: T
+  computeResult: () => T
+  sub: Set<Atom<any, TContext, TDebugRefreshReason>> // always empty
+  super: Set<Atom<any, TContext, TDebugRefreshReason> | Effect>
   label?: string
   /** Container for meta information (e.g. the LiveStore Store) */
   meta?: any
   equal: (a: T, b: T) => boolean
 }
 
-type BaseThunk<T> = {
+export type Thunk<TResult, TContext, TDebugRefreshReason extends Taggable> = {
   _tag: 'thunk'
   id: string
-  height: number
-  getResult: (get: GetAtom, addDebugInfo: (debugInfo: any) => void) => T
-  sub: Set<Atom<any>>
-  super: Set<Atom<any> | Effect>
+  isDirty: boolean
+  computeResult: (
+    otelContext?: otel.Context,
+    debugRefreshReason?: RefreshReasonWithGenericReasons<TDebugRefreshReason>,
+  ) => TResult
+  previousResult: TResult | NOT_REFRESHED_YET
+  sub: Set<Atom<any, TContext, TDebugRefreshReason>>
+  super: Set<Atom<any, TContext, TDebugRefreshReason> | Effect>
   label?: string
   /** Container for meta information (e.g. the LiveStore Store) */
   meta?: any
-  equal: (a: T, b: T) => boolean
-}
+  equal: (a: TResult, b: TResult) => boolean
+  recomputations: number
 
-type UnevaluatedThunk<T> = BaseThunk<T> & { result: NOT_REFRESHED_YET }
-export type Thunk<T> = BaseThunk<T> & { result: T }
+  __getResult: any
+}
 
-export type Atom<T> = Ref<T> | Thunk<T>
+export type Atom<T, TContext, TDebugRefreshReason extends Taggable> =
+  | Ref<T, TContext, TDebugRefreshReason>
+  | Thunk<T, TContext, TDebugRefreshReason>
 
 export type Effect = {
   _tag: 'effect'
   id: string
-  doEffect: (get: GetAtom) => void
-  sub: Set<Atom<any>>
-}
-
-class DependencyNotReadyError extends Error {
-  constructor(message: string) {
-    super(message)
-    this.name = 'DependencyNotReadyError'
-  }
+  doEffect: (otelContext?: otel.Context) => void
+  sub: Set<Atom<any, TODO, TODO>>
+  label?: string
 }
 
 export type Taggable<T extends string = string> = { _tag: T }
 
+export type DebugThunkInfo<T extends string = string> = {
+  _tag: T
+  durationMs: number
+}
+
 export type ReactiveGraphOptions = {
   effectsWrapper?: (runEffects: () => void) => void
-  otelTracer: otel.Tracer
 }
 
-export type AtomDebugInfo<TDebugThunkInfo extends Taggable> = {
+export type AtomDebugInfo<TDebugThunkInfo extends DebugThunkInfo> = {
   atom: SerializedAtom
   resultChanged: boolean
-  durationMs: number
   debugInfo: TDebugThunkInfo
 }
 
-export type RefreshDebugInfo<TDebugRefreshReason extends Taggable, TDebugThunkInfo extends Taggable> = {
+// TODO possibly find a better name for "refresh"
+export type RefreshDebugInfo<TDebugRefreshReason extends Taggable, TDebugThunkInfo extends DebugThunkInfo> = {
   /** Currently only used for easier handling in React (e.g. as key) */
   id: string
   reason: TDebugRefreshReason
@@ -113,20 +118,16 @@ export type RefreshReasonWithGenericReasons<T extends Taggable> =
       _tag: 'makeThunk'
       label?: string
     }
-  | {
-      _tag: 'makeEffect'
-      label?: string
-    }
   | { _tag: 'unknown' }
 
 export const unknownRefreshReason = () => {
-  debugger
+  // debugger
   return { _tag: 'unknown' as const }
 }
 
 export type SerializedAtom = Readonly<
   PrettifyFlat<
-    Pick<Atom<unknown>, '_tag' | 'height' | 'id' | 'label' | 'meta' | 'result'> & {
+    Pick<Atom<unknown, unknown, any>, '_tag' | 'id' | 'label' | 'meta'> & {
       sub: string[]
       super: string[]
     }
@@ -137,45 +138,52 @@ export type SerializedEffect = Readonly<PrettifyFlat<Pick<Effect, '_tag' | 'id'>
 
 type ReactiveGraphSnapshot = {
   readonly atoms: SerializedAtom[]
-  readonly effects: SerializedEffect[]
+  // readonly effects: SerializedEffect[]
   /** IDs of atoms and effects that are dirty */
-  readonly dirtyNodes: string[]
+  // readonly dirtyNodes: string[]
 }
 
 const uniqueNodeId = () => uniqueId('node-')
 const uniqueRefreshInfoId = () => uniqueId('refresh-info-')
 
-const serializeAtom = (atom: Atom<any>): SerializedAtom => ({
-  ...pick(atom, ['_tag', 'height', 'id', 'label', 'meta', 'result']),
+const serializeAtom = (atom: Atom<any, unknown, any>): SerializedAtom => ({
+  ...pick(atom, ['_tag', 'id', 'label', 'meta']),
   sub: Array.from(atom.sub).map((a) => a.id),
   super: Array.from(atom.super).map((a) => a.id),
 })
 
-const serializeEffect = (effect: Effect): SerializedEffect => pick(effect, ['_tag', 'id'])
+// const serializeEffect = (effect: Effect): SerializedEffect => pick(effect, ['_tag', 'id'])
 
-export class ReactiveGraph<TDebugRefreshReason extends Taggable, TDebugThunkInfo extends Taggable> {
-  private atoms: Set<Atom<any>> = new Set()
-  private effects: Set<Effect> = new Set()
-  private otelTracer: otel.Tracer
-  readonly dirtyNodes: Set<Atom<any> | Effect> = new Set()
+export class ReactiveGraph<
+  TDebugRefreshReason extends Taggable,
+  TDebugThunkInfo extends DebugThunkInfo,
+  TContext = {},
+> {
+  readonly atoms: Set<Atom<any, TContext, TDebugRefreshReason>> = new Set()
   effectsWrapper: (runEffects: () => void) => void
 
+  context: TContext | undefined
+
   debugRefreshInfos: BoundArray<
     RefreshDebugInfo<RefreshReasonWithGenericReasons<TDebugRefreshReason>, TDebugThunkInfo>
   > = new BoundArray(5000)
 
+  currentDebugRefresh: { refreshedAtoms: AtomDebugInfo<TDebugThunkInfo>[]; startMs: DOMHighResTimeStamp } | undefined
+
   constructor(options: ReactiveGraphOptions) {
     this.effectsWrapper = options?.effectsWrapper ?? ((runEffects: () => void) => runEffects())
-    this.otelTracer = options.otelTracer
   }
 
-  makeRef<T>(val: T, options?: { label?: string; meta?: unknown; equal?: (a: T, b: T) => boolean }): Ref<T> {
-    const ref: Ref<T> = {
+  makeRef<T>(
+    val: T,
+    options?: { label?: string; meta?: unknown; equal?: (a: T, b: T) => boolean },
+  ): Ref<T, TContext, TDebugRefreshReason> {
+    const ref: Ref<T, TContext, TDebugRefreshReason> = {
       _tag: 'ref',
       id: uniqueNodeId(),
-      result: val,
-      height: 0,
-      getResult: () => ref.result,
+      isDirty: false,
+      previousResult: val,
+      computeResult: () => ref.previousResult,
       sub: new Set(),
       super: new Set(),
       label: options?.label,
@@ -189,46 +197,105 @@ export class ReactiveGraph<TDebugRefreshReason extends Taggable, TDebugThunkInfo
   }
 
   makeThunk<T>(
-    getResult: (get: GetAtom, addDebugInfo: (debugInfo: TDebugThunkInfo) => void) => T,
-    options:
+    getResult: (
+      get: GetAtom,
+      setDebugInfo: (debugInfo: TDebugThunkInfo) => void,
+      ctx: TContext,
+      otelContext: otel.Context | undefined,
+    ) => T,
+    options?:
       | {
           label?: string
           meta?: any
           equal?: (a: T, b: T) => boolean
           /** Debug info for initializing the thunk (i.e. running it the first time) */
-          debugRefreshReason?: RefreshReasonWithGenericReasons<TDebugRefreshReason>
+          // debugRefreshReason?: RefreshReasonWithGenericReasons<TDebugRefreshReason>
         }
       | undefined,
-    otelContext: otel.Context,
-  ): Thunk<T> {
-    const thunk: UnevaluatedThunk<T> = {
+  ): Thunk<T, TContext, TDebugRefreshReason> {
+    const thunk: Thunk<T, TContext, TDebugRefreshReason> = {
       _tag: 'thunk',
       id: uniqueNodeId(),
-      result: NOT_REFRESHED_YET,
-      height: 0,
-      getResult,
+      previousResult: NOT_REFRESHED_YET,
+      isDirty: true,
+      computeResult: (otelContext, debugRefreshReason) => {
+        if (thunk.isDirty) {
+          const neededCurrentRefresh = this.currentDebugRefresh === undefined
+          if (neededCurrentRefresh) {
+            this.currentDebugRefresh = { refreshedAtoms: [], startMs: performance.now() }
+          }
+
+          // Reset previous subcomputations as we're about to re-add them as part of the `doEffect` call below
+          thunk.sub = new Set()
+
+          const getAtom = (atom: Atom<T, TContext, TDebugRefreshReason>, otelContext: otel.Context) => {
+            this.addEdge(thunk, atom)
+            return compute(atom, otelContext)
+          }
+
+          let debugInfo: TDebugThunkInfo | undefined = undefined
+          const setDebugInfo = (debugInfo_: TDebugThunkInfo) => {
+            debugInfo = debugInfo_
+          }
+
+          const result = getResult(
+            getAtom as GetAtom,
+            setDebugInfo,
+            this.context ?? throwContextNotSetError(),
+            otelContext,
+          )
+
+          const resultChanged = thunk.equal(thunk.previousResult as T, result) === false
+
+          const debugInfoForAtom = {
+            atom: serializeAtom(thunk),
+            resultChanged,
+            debugInfo: debugInfo ?? (unknownRefreshReason() as TDebugThunkInfo),
+          } satisfies AtomDebugInfo<TDebugThunkInfo>
+
+          this.currentDebugRefresh!.refreshedAtoms.push(debugInfoForAtom)
+
+          thunk.isDirty = false
+          thunk.previousResult = result
+          thunk.recomputations++
+
+          if (neededCurrentRefresh) {
+            const refreshedAtoms = this.currentDebugRefresh!.refreshedAtoms
+            const durationMs = performance.now() - this.currentDebugRefresh!.startMs
+            this.currentDebugRefresh = undefined
+
+            const refreshDebugInfo = {
+              id: uniqueRefreshInfoId(),
+              reason: debugRefreshReason ?? { _tag: 'makeThunk', label: options?.label },
+              skippedRefresh: false,
+              refreshedAtoms,
+              durationMs,
+              completedTimestamp: Date.now(),
+              graphSnapshot: this.getSnapshot(),
+            }
+            this.debugRefreshInfos.push(refreshDebugInfo)
+          }
+
+          return result
+        } else {
+          return thunk.previousResult as T
+        }
+      },
       sub: new Set(),
       super: new Set(),
+      recomputations: 0,
       label: options?.label,
       meta: options?.meta,
       equal: options?.equal ?? isEqual,
+      __getResult: getResult,
     }
 
     this.atoms.add(thunk)
-    this.dirtyNodes.add(thunk)
-    this.refresh(
-      {
-        otelHint: options?.label ?? 'makeThunk',
-        debugRefreshReason: options?.debugRefreshReason ?? { _tag: 'makeThunk', label: options?.label },
-      },
-      otelContext,
-    )
 
-    // Manually tell the typesystem this thunk is guaranteed to have a result at this point
-    return thunk as unknown as Thunk<T>
+    return thunk
   }
 
-  destroy(node: Atom<any> | Effect) {
+  destroy(node: Atom<any, TContext, TDebugRefreshReason> | Effect) {
     // Recursively destroy any supercomputations
     if (node._tag === 'ref' || node._tag === 'thunk') {
       for (const superComp of node.super) {
@@ -241,301 +308,160 @@ export class ReactiveGraph<TDebugRefreshReason extends Taggable, TDebugThunkInfo
       this.removeEdge(node, subComp)
     }
 
-    if (node._tag === 'effect') {
-      this.effects.delete(node)
-    } else {
+    if (node._tag !== 'effect') {
       this.atoms.delete(node)
     }
   }
 
   makeEffect(
-    doEffect: (get: GetAtom) => void,
-    options: { label?: string } | undefined,
-    otelContext: otel.Context,
+    doEffect: (get: GetAtom, otelContext?: otel.Context) => void,
+    options?: { label?: string } | undefined,
   ): Effect {
     const effect: Effect = {
       _tag: 'effect',
       id: uniqueNodeId(),
-      doEffect,
+      doEffect: (otelContext) => {
+        // NOTE we're not tracking any debug refresh info for effects as they're tracked by the thunks they depend on
+
+        // Reset previous subcomputations as we're about to re-add them as part of the `doEffect` call below
+        effect.sub = new Set()
+
+        const getAtom = (atom: Atom<any, TContext, TDebugRefreshReason>, otelContext: otel.Context) => {
+          this.addEdge(effect, atom)
+          return compute(atom, otelContext)
+        }
+
+        doEffect(getAtom as GetAtom, otelContext)
+      },
       sub: new Set(),
+      label: options?.label,
     }
 
-    this.effects.add(effect)
-    this.dirtyNodes.add(effect)
-    this.refresh(
-      { otelHint: 'makeEffect', debugRefreshReason: { _tag: 'makeEffect', label: options?.label } },
-      otelContext,
-    )
-
     return effect
   }
 
   setRef<T>(
-    ref: Ref<T>,
+    ref: Ref<T, TContext, TDebugRefreshReason>,
     val: T,
-    options:
+    options?:
       | {
-          otelHint?: string
-          skipRefresh?: boolean
           debugRefreshReason?: TDebugRefreshReason
+          otelContext?: otel.Context
         }
       | undefined,
-    otelContext: otel.Context,
   ) {
-    const { otelHint, skipRefresh, debugRefreshReason } = options ?? {}
-    ref.result = val
-    this.dirtyNodes.add(ref)
+    ref.previousResult = val
 
-    if (skipRefresh) {
-      const refreshDebugInfo: RefreshDebugInfo<TDebugRefreshReason, TDebugThunkInfo> = {
-        id: uniqueRefreshInfoId(),
-        reason: debugRefreshReason ?? (unknownRefreshReason() as TDebugRefreshReason),
-        skippedRefresh: true,
-        refreshedAtoms: [],
-        durationMs: 0,
-        completedTimestamp: Date.now(),
-        graphSnapshot: this.getSnapshot(),
-      }
-      this.debugRefreshInfos.push(refreshDebugInfo)
-      return
-    }
+    const effectsToRefresh = new Set<Effect>()
+    markSuperCompDirtyRec(ref, effectsToRefresh)
 
-    this.refresh({ otelHint, debugRefreshReason }, otelContext)
+    this.runEffects(effectsToRefresh, options)
   }
 
   setRefs<T>(
-    refs: [Ref<T>, T][],
-    options:
+    refs: [Ref<T, TContext, TDebugRefreshReason>, T][],
+    options?:
       | {
-          otelHint?: string
-          skipRefresh?: boolean
           debugRefreshReason?: TDebugRefreshReason
+          otelContext?: otel.Context
         }
       | undefined,
-    otelContext: otel.Context,
   ) {
-    const otelHint = options?.otelHint ?? ''
-    const skipRefresh = options?.skipRefresh ?? false
-    const debugRefreshReason = options?.debugRefreshReason
+    const effectsToRefresh = new Set<Effect>()
     for (const [ref, val] of refs) {
-      ref.result = val
-      this.dirtyNodes.add(ref)
-    }
-
-    if (skipRefresh) {
-      const refreshDebugInfo: RefreshDebugInfo<TDebugRefreshReason, TDebugThunkInfo> = {
-        id: uniqueRefreshInfoId(),
-        reason: debugRefreshReason ?? (unknownRefreshReason() as TDebugRefreshReason),
-        skippedRefresh: true,
-        refreshedAtoms: [],
-        durationMs: 0,
-        completedTimestamp: Date.now(),
-        graphSnapshot: this.getSnapshot(),
-      }
-      this.debugRefreshInfos.push(refreshDebugInfo)
-      return
-    }
+      ref.previousResult = val
 
-    this.refresh({ otelHint, debugRefreshReason }, otelContext)
-  }
-
-  get<T>(atom: Atom<T>, context: Atom<any> | Effect): T {
-    // Autotracking: if we're getting the value of an atom,
-    // that means it's a subcomputation for the currently refreshing atom.
-    this.addEdge(context, atom)
-
-    const dependencyMightBeStale = context._tag !== 'effect' && context.height <= atom.height
-    const dependencyNotRefreshedYet = atom.result === NOT_REFRESHED_YET
-
-    if (dependencyMightBeStale || dependencyNotRefreshedYet) {
-      throw new DependencyNotReadyError(
-        `${this.label(context)} referenced dependency ${this.label(atom)} which isn't ready`,
-      )
+      markSuperCompDirtyRec(ref, effectsToRefresh)
     }
 
-    return atom.result
+    this.runEffects(effectsToRefresh, options)
   }
 
-  /**
-   * Update the graph to be consistent with the current values of the root atoms.
-   * Generally we run this after a ref is updated.
-   * At the end of the refresh, we run any effects that were scheduled.
-   *
-   * @param roots Root atoms to start the refresh from
-   */
-  refresh(
-    options:
+  private runEffects = (
+    effectsToRefresh: Set<Effect>,
+    options?:
       | {
-          otelHint?: string
-          debugRefreshReason?: RefreshReasonWithGenericReasons<TDebugRefreshReason>
+          debugRefreshReason?: TDebugRefreshReason
+          otelContext?: otel.Context
         }
       | undefined,
-    otelContext: otel.Context,
-  ): void {
-    const otelHint = options?.otelHint ?? ''
-    const debugRefreshReason = options?.debugRefreshReason
-
-    const roots = [...this.dirtyNodes]
-
-    const debugInfoForRefreshedAtoms: AtomDebugInfo<TDebugThunkInfo>[] = []
-
-    // if (otelHint.includes('tableName')) {
-    //   console.log('refresh', otelHint, { shouldTrace })
-    // }
-
-    this.otelTracer.startActiveSpan(`LiveStore.refresh:${otelHint}`, {}, otelContext, (span) => {
-      const atomsToRefresh = roots.filter(isAtom)
-      const effectsToRun = new Set(roots.filter(isEffect))
-
-      span.setAttribute('livestore.hint', otelHint)
-      span.setAttribute('livestore.rootsCount', roots.length)
-      // span.setAttribute('sstack', new Error().stack!)
-
-      // Sort in topological order, starting with minimum height
-      while (atomsToRefresh.length > 0) {
-        atomsToRefresh.sort((a, b) => a.height - b.height)
-        const atomToRefresh = atomsToRefresh.shift()!
-
-        // Recompute the value
-        let resultChanged = false
-        const debugInfoForAtom = {
-          atom: serializeAtom(atomToRefresh),
-          resultChanged,
-          // debugInfo: unknownRefreshReason() as TDebugThunkInfo,
-          debugInfo: { _tag: 'unknown' } as TDebugThunkInfo,
-          durationMs: 0,
-        } satisfies AtomDebugInfo<TDebugThunkInfo>
-        try {
-          atomToRefresh.sub = new Set()
-          const beforeTimestamp = performance.now()
-          const newResult = atomToRefresh.getResult(
-            (atom) => this.get(atom, atomToRefresh),
-            (debugInfo) => {
-              debugInfoForAtom.debugInfo = debugInfo
-            },
-          )
-          const afterTimestamp = performance.now()
-          debugInfoForAtom.durationMs = afterTimestamp - beforeTimestamp
-
-          // Determine if the result changed to do early cutoff and avoid further unnecessary updates.
-          // Refs never depend on anything, so if a ref is being refreshed it definitely changed.
-          // For thunks, we use a deep equality check.
-          resultChanged =
-            atomToRefresh._tag === 'ref' ||
-            (atomToRefresh._tag === 'thunk' && !atomToRefresh.equal(atomToRefresh.result, newResult))
-
-          if (resultChanged) {
-            atomToRefresh.result = newResult
-          }
+  ) => {
+    this.effectsWrapper(() => {
+      this.currentDebugRefresh = { refreshedAtoms: [], startMs: performance.now() }
 
-          this.dirtyNodes.delete(atomToRefresh)
-        } catch (e) {
-          if (e instanceof DependencyNotReadyError) {
-            // If we hit a dependency that wasn't ready yet,
-            // abort this recomputation and try again later.
-            if (!atomsToRefresh.includes(atomToRefresh)) {
-              atomsToRefresh.push(atomToRefresh)
-            }
-          } else {
-            throw e
-          }
-        }
-
-        debugInfoForRefreshedAtoms.push(debugInfoForAtom)
-
-        if (!resultChanged) {
-          continue
-        }
-
-        // Schedule supercomputations
-        for (const superComp of atomToRefresh.super) {
-          switch (superComp._tag) {
-            case 'ref':
-            case 'thunk': {
-              if (!atomsToRefresh.includes(superComp)) {
-                atomsToRefresh.push(superComp)
-              }
-              break
-            }
-            case 'effect': {
-              effectsToRun.add(superComp)
-              break
-            }
-          }
-        }
+      for (const effect of effectsToRefresh) {
+        effect.doEffect(options?.otelContext)
       }
 
-      this.effectsWrapper(() => {
-        for (const effect of effectsToRun) {
-          effect.doEffect((atom: Atom<any>) => this.get(atom, effect))
-          this.dirtyNodes.delete(effect)
-        }
-      })
-
-      span.end()
-
-      const spanDurationHr = (span as any)._duration
-      const spanDurationMs = spanDurationHr[0] * 1000 + spanDurationHr[1] / 1_000_000
+      const refreshedAtoms = this.currentDebugRefresh.refreshedAtoms
+      const durationMs = performance.now() - this.currentDebugRefresh.startMs
+      this.currentDebugRefresh = undefined
 
-      const refreshDebugInfo: RefreshDebugInfo<
-        RefreshReasonWithGenericReasons<TDebugRefreshReason>,
-        TDebugThunkInfo
-      > = {
+      const refreshDebugInfo: RefreshDebugInfo<TDebugRefreshReason, TDebugThunkInfo> = {
         id: uniqueRefreshInfoId(),
-        reason: debugRefreshReason ?? unknownRefreshReason(),
-        refreshedAtoms: debugInfoForRefreshedAtoms,
+        reason: options?.debugRefreshReason ?? (unknownRefreshReason() as TDebugRefreshReason),
         skippedRefresh: false,
-        durationMs: spanDurationMs,
+        refreshedAtoms,
+        durationMs,
         completedTimestamp: Date.now(),
         graphSnapshot: this.getSnapshot(),
       }
-
       this.debugRefreshInfos.push(refreshDebugInfo)
     })
   }
 
-  label(atom: Atom<any> | Effect) {
-    if (atom._tag === 'effect') {
-      return `unknown effect`
-    } else {
-      return atom.label ?? `unknown ${atom._tag}`
-    }
-  }
-
-  addEdge(superComp: Atom<any> | Effect, subComp: Atom<any>) {
+  addEdge(
+    superComp: Atom<any, TContext, TDebugRefreshReason> | Effect,
+    subComp: Atom<any, TContext, TDebugRefreshReason>,
+  ) {
     superComp.sub.add(subComp)
     subComp.super.add(superComp)
-    this.updateAtomHeight(superComp)
   }
 
-  removeEdge(superComp: Atom<any> | Effect, subComp: Atom<any>) {
+  removeEdge(
+    superComp: Atom<any, TContext, TDebugRefreshReason> | Effect,
+    subComp: Atom<any, TContext, TDebugRefreshReason>,
+  ) {
     superComp.sub.delete(subComp)
     subComp.super.delete(superComp)
-    this.updateAtomHeight(superComp)
-  }
-
-  updateAtomHeight(atom: Atom<any> | Effect) {
-    switch (atom._tag) {
-      case 'ref': {
-        atom.height = 0
-        break
-      }
-      case 'thunk': {
-        atom.height = (max([...atom.sub].map((atom) => atom.height)) || 0) + 1
-        break
-      }
-      case 'effect': {
-        break
-      }
-    }
   }
 
   private getSnapshot = (): ReactiveGraphSnapshot => ({
     atoms: Array.from(this.atoms).map(serializeAtom),
-    effects: Array.from(this.effects).map(serializeEffect),
-    dirtyNodes: Array.from(this.dirtyNodes).map((a) => a.id),
+    // effects: Array.from(this.effects).map(serializeEffect),
+    // dirtyNodes: Array.from(this.dirtyNodes).map((a) => a.id),
   })
 }
 
-const isAtom = <T>(a: Atom<T> | Effect): a is Atom<T> => a._tag === 'ref' || a._tag === 'thunk'
-const isEffect = <T>(a: Atom<T> | Effect): a is Effect => a._tag === 'effect'
+// const isAtom = <T, TContext>(a: Atom<T, TContext> | Effect): a is Atom<T, TContext> =>
+//   a._tag === 'ref' || a._tag === 'thunk'
+// const isEffect = <T, TContext>(a: Atom<T, TContext> | Effect): a is Effect => a._tag === 'effect'
+
+const compute = <T>(atom: Atom<T, unknown, any>, otelContext: otel.Context): T => {
+  // const __getResult = atom._tag === 'thunk' ? atom.__getResult.toString() : ''
+  if (atom.isDirty) {
+    // console.log('atom is dirty', atom.id, atom.label ?? '', atom._tag, __getResult)
+    const result = atom.computeResult(otelContext)
+    atom.isDirty = false
+    atom.previousResult = result
+    return result
+  } else {
+    // console.log('atom is clean', atom.id, atom.label ?? '', atom._tag, __getResult)
+    return atom.previousResult as T
+  }
+}
+
+const markSuperCompDirtyRec = <T>(atom: Atom<T, unknown, any>, effectsToRefresh: Set<Effect>) => {
+  for (const superComp of atom.super) {
+    if (superComp._tag === 'thunk' || superComp._tag === 'ref') {
+      superComp.isDirty = true
+      markSuperCompDirtyRec(superComp, effectsToRefresh)
+    } else {
+      effectsToRefresh.add(superComp)
+    }
+  }
+}
+
+const throwContextNotSetError = (): never => {
+  throw new Error(`LiveStore Error: \`context\` not set on ReactiveGraph`)
+}