matterviz 0.3.4 → 0.3.6

package/dist/src/lib/layout/json-tree/utils.ts

@@ -0,0 +1,682 @@
+// JSON Tree utility functions
+import type { DiffEntry, JsonValueType } from './types'
+
+// Pre-compiled regex for valid JS identifiers (used in path formatting)
+const VALID_IDENTIFIER_RE = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/
+
+// Circular-safe JSON.stringify helper (hoisted for reuse)
+function safe_stringify(val: unknown): string {
+  const seen = new WeakSet()
+  return JSON.stringify(
+    val,
+    (_key, inner) => {
+      if (typeof inner === `object` && inner !== null) {
+        if (seen.has(inner)) return `[Circular]`
+        seen.add(inner)
+      }
+      if (typeof inner === `bigint`) return `${inner}n`
+      if (typeof inner === `symbol`) return inner.toString()
+      if (typeof inner === `function`) return `[Function: ${inner.name || `anonymous`}]`
+      return inner
+    },
+    2,
+  )
+}
+
+// Detect the type of a value for rendering purposes
+export function get_value_type(value: unknown): JsonValueType {
+  if (value === null) return `null`
+  if (value === undefined) return `undefined`
+
+  const type = typeof value
+
+  if (type === `string`) return `string`
+  if (type === `number`) return `number`
+  if (type === `boolean`) return `boolean`
+  if (type === `symbol`) return `symbol`
+  if (type === `bigint`) return `bigint`
+  if (type === `function`) return `function`
+
+  if (type === `object`) {
+    if (Array.isArray(value)) return `array`
+    if (value instanceof Date) return `date`
+    if (value instanceof RegExp) return `regexp`
+    if (value instanceof Map) return `map`
+    if (value instanceof Set) return `set`
+    if (value instanceof Error) return `error`
+    return `object`
+  }
+
+  return `object` // fallback
+}
+
+// Check if a value type is expandable (has children)
+export const is_expandable_type = (value_type: JsonValueType): boolean =>
+  value_type === `object` ||
+  value_type === `array` ||
+  value_type === `map` ||
+  value_type === `set`
+
+// Check if a value type is a primitive (searchable as string)
+export const is_primitive_type = (value_type: JsonValueType): boolean =>
+  value_type === `string` ||
+  value_type === `number` ||
+  value_type === `boolean` ||
+  value_type === `null` ||
+  value_type === `undefined` ||
+  value_type === `bigint`
+
+// Check if a value is expandable
+export const is_expandable = (value: unknown): boolean =>
+  is_expandable_type(get_value_type(value))
+
+// Get the number of children for a value
+export function get_child_count(value: unknown): number {
+  const type = get_value_type(value)
+  if (type === `array`) return (value as unknown[]).length
+  if (type === `object`) return Object.keys(value as object).length
+  if (type === `map`) return (value as Map<unknown, unknown>).size
+  if (type === `set`) return (value as Set<unknown>).size
+  return 0
+}
+
+// Format a path segment for display
+// Handles both string keys and numeric indices
+// is_first: true for the first segment (no leading dot for valid identifiers)
+function format_path_segment(segment: string | number, is_first: boolean = false): string {
+  if (typeof segment === `number`) {
+    return `[${segment}]`
+  }
+  // Check if the key is a valid identifier (can use dot notation)
+  if (VALID_IDENTIFIER_RE.test(segment)) {
+    return is_first ? segment : `.${segment}`
+  }
+  // Use bracket notation for keys with special characters
+  return `["${segment.replace(/"/g, `\\"`)}"]`
+}
+
+// Format a full path from segments
+// e.g., ["users", 0, "name"] -> "users[0].name"
+// e.g., [0, "name"] -> "[0].name" (root numeric index)
+// e.g., ["key.with.dot"] -> '["key.with.dot"]' (root special key)
+export function format_path(segments: (string | number)[]): string {
+  if (segments.length === 0) return ``
+
+  let result = format_path_segment(segments[0], true)
+  for (let idx = 1; idx < segments.length; idx++) {
+    result += format_path_segment(segments[idx])
+  }
+  return result
+}
+
+// Build a path string from parent path and key
+export function build_path(parent_path: string, key: string | number): string {
+  if (!parent_path) {
+    return format_path_segment(key, true)
+  }
+  return parent_path + format_path_segment(key)
+}
+
+// Format a primitive/special value to string (shared by serialize and preview)
+function format_special_value(value: unknown, type: JsonValueType): string | null {
+  if (type === `undefined`) return `undefined`
+  if (type === `null`) return `null`
+  if (type === `number` || type === `boolean`) return String(value)
+  if (type === `bigint`) return `${value}n`
+  if (type === `symbol`) return (value as symbol).toString()
+  if (type === `date`) return (value as Date).toISOString()
+  if (type === `regexp`) return (value as RegExp).toString()
+  if (type === `error`) return `${(value as Error).name}: ${(value as Error).message}`
+  return null // not a special type
+}
+
+// Serialize a value for copying to clipboard
+export function serialize_for_copy(value: unknown): string {
+  const type = get_value_type(value)
+  if (type === `string`) return value as string
+  if (type === `function`) return (value as (...args: unknown[]) => unknown).toString()
+
+  const special = format_special_value(value, type)
+  if (special !== null) return special
+
+  // Map/Set/Object/Array - try JSON stringify
+  const data =
+    type === `map`
+      ? Array.from((value as Map<unknown, unknown>).entries())
+      : type === `set`
+        ? Array.from(value as Set<unknown>)
+        : value
+  try {
+    return safe_stringify(data)
+  } catch {
+    return String(value)
+  }
+}
+
+// Format a value for inline preview (collapsed view)
+export function format_preview(value: unknown, max_length: number = 50): string {
+  const type = get_value_type(value)
+
+  // Collection summaries
+  if (type === `array`) return `Array(${(value as unknown[]).length})`
+  if (type === `object`) {
+    const len = Object.keys(value as object).length
+    return `{${len} ${len === 1 ? `key` : `keys`}}`
+  }
+  if (type === `map`) return `Map(${(value as Map<unknown, unknown>).size})`
+  if (type === `set`) return `Set(${(value as Set<unknown>).size})`
+
+  // String with truncation
+  if (type === `string`) {
+    const str = value as string
+    return str.length > max_length ? `"${str.slice(0, max_length)}..."` : `"${str}"`
+  }
+
+  // Function has special format
+  if (type === `function`) {
+    return `ƒ ${(value as (...args: unknown[]) => unknown).name || `anonymous`}()`
+  }
+
+  // Use shared formatter for other special types
+  return format_special_value(value, type) ?? String(value)
+}
+
+// Check if a path/key/value matches a search query (case-insensitive)
+export function matches_search(
+  path: string,
+  key: string | number | null,
+  value: unknown,
+  query: string,
+): boolean {
+  if (!query) return false
+
+  const lower_query = query.toLowerCase()
+
+  // Check path
+  if (path.toLowerCase().includes(lower_query)) return true
+
+  // Check key
+  if (key !== null && String(key).toLowerCase().includes(lower_query)) return true
+
+  // Check value (for primitives)
+  const type = get_value_type(value)
+  if (is_primitive_type(type)) {
+    return String(value).toLowerCase().includes(lower_query)
+  }
+
+  return false
+}
+
+// Iterate over children of an expandable value, calling visitor for each
+function for_each_child(
+  value: unknown,
+  type: JsonValueType,
+  visitor: (child_value: unknown, key: string | number, map_key?: unknown) => void,
+): void {
+  if (type === `array`) {
+    ;(value as unknown[]).forEach((val, idx) => visitor(val, idx))
+  } else if (type === `object`) {
+    for (const key of Object.keys(value as Record<string, unknown>)) {
+      visitor((value as Record<string, unknown>)[key], key)
+    }
+  } else if (type === `map`) {
+    let idx = 0
+    for (const [map_key, map_value] of value as Map<unknown, unknown>) {
+      visitor(map_value, idx, map_key)
+      idx++
+    }
+  } else if (type === `set`) {
+    let idx = 0
+    for (const set_value of value as Set<unknown>) {
+      visitor(set_value, idx)
+      idx++
+    }
+  }
+}
+
+// Collect all expandable paths in a value tree
+export function collect_all_paths(
+  value: unknown,
+  current_path: string = ``,
+  max_depth: number = Infinity,
+  current_depth: number = 0,
+  seen: WeakSet<object> = new WeakSet(),
+): string[] {
+  if (current_depth >= max_depth) return []
+  const type = get_value_type(value)
+  if (!is_expandable_type(type)) return []
+  if (typeof value === `object` && value !== null) {
+    if (seen.has(value)) return []
+    seen.add(value)
+  }
+
+  const paths: string[] = current_path ? [current_path] : []
+  for_each_child(value, type, (child_value, key) => {
+    const child_path = build_path(current_path, key)
+    paths.push(
+      ...collect_all_paths(child_value, child_path, max_depth, current_depth + 1, seen),
+    )
+  })
+  return paths
+}
+
+// Find all paths that match a search query
+export function find_matching_paths(
+  value: unknown,
+  query: string,
+  current_path: string = ``,
+  current_key: string | number | null = null,
+  seen: WeakSet<object> = new WeakSet(),
+): Set<string> {
+  const matches = new Set<string>()
+  if (!query) return matches
+
+  const lower_query = query.toLowerCase()
+  if (matches_search(current_path, current_key, value, query)) {
+    matches.add(current_path)
+  }
+
+  const type = get_value_type(value)
+  if (!is_expandable_type(type)) return matches
+  if (typeof value === `object` && value !== null) {
+    if (seen.has(value)) return matches
+    seen.add(value)
+  }
+
+  for_each_child(value, type, (child_value, key, map_key) => {
+    const child_path = build_path(current_path, key)
+    // Also check if Map key matches
+    if (
+      map_key !== undefined &&
+      serialize_for_copy(map_key).toLowerCase().includes(lower_query)
+    ) {
+      matches.add(child_path)
+    }
+    for (const match of find_matching_paths(child_value, query, child_path, key, seen)) {
+      matches.add(match)
+    }
+  })
+  return matches
+}
+
+// Get all ancestor paths for a given path
+// e.g., "users[0].name" -> ["users", "users[0]"]
+export function get_ancestor_paths(path: string): string[] {
+  const ancestors: string[] = []
+  let current = ``
+
+  // Parse the path to extract segments
+  const segments = parse_path(path)
+  for (let idx = 0; idx < segments.length - 1; idx++) {
+    current = build_path(current, segments[idx])
+    ancestors.push(current)
+  }
+
+  return ancestors
+}
+
+// Parse a path string into segments
+// e.g., "users[0].name" -> ["users", 0, "name"]
+export function parse_path(path: string): (string | number)[] {
+  if (!path) return []
+
+  const segments: (string | number)[] = []
+  let current = ``
+  let in_bracket = false
+
+  for (let idx = 0; idx < path.length; idx++) {
+    const char = path[idx]
+
+    if (char === `.` && !in_bracket) {
+      if (current) segments.push(current)
+      current = ``
+    } else if (char === `[`) {
+      if (current) segments.push(current)
+      current = ``
+      in_bracket = true
+    } else if (char === `]`) {
+      if (current) {
+        // Check if it's a number index
+        const num = Number(current)
+        if (Number.isNaN(num)) {
+          // Remove surrounding quotes and unescape internal quotes
+          const unquoted = current.replace(/^"|"$/g, ``).replace(/\\"/g, `"`)
+          segments.push(unquoted)
+        } else segments.push(num)
+      }
+      current = ``
+      in_bracket = false
+    } else current += char
+  }
+
+  // Handle trailing content (e.g., unclosed bracket like "a[0")
+  if (current) {
+    if (in_bracket) {
+      // Apply same numeric/quoted-string logic as inside brackets
+      const num = Number(current)
+      if (Number.isNaN(num)) {
+        const unquoted = current.replace(/^"|"$/g, ``).replace(/\\"/g, `"`)
+        segments.push(unquoted)
+      } else segments.push(num)
+    } else segments.push(current)
+  }
+
+  return segments
+}
+
+// Check if two values are deeply equal (for change detection)
+export function values_equal(val_a: unknown, val_b: unknown): boolean {
+  if (val_a === val_b) return true
+  // Handle NaN (NaN !== NaN in JS, but we want NaN === NaN for change detection)
+  if (
+    typeof val_a === `number` &&
+    typeof val_b === `number` &&
+    Number.isNaN(val_a) &&
+    Number.isNaN(val_b)
+  )
+    return true
+  if (val_a === null || val_b === null) return false
+  if (typeof val_a !== typeof val_b) return false
+
+  const type = get_value_type(val_a)
+
+  // For primitives, strict equality is sufficient
+  if (is_primitive_type(type) || type === `symbol`) {
+    return val_a === val_b
+  }
+
+  // For dates, compare timestamps
+  if (type === `date`) {
+    return (val_a as Date).getTime() === (val_b as Date).getTime()
+  }
+
+  // For regex, compare string representation
+  if (type === `regexp`) {
+    return (val_a as RegExp).toString() === (val_b as RegExp).toString()
+  }
+
+  // For objects and arrays, do shallow comparison (for performance)
+  // Deep changes will be detected at the child level
+  if (type === `array`) {
+    return (val_a as unknown[]).length === (val_b as unknown[]).length
+  }
+
+  if (type === `object`) {
+    const keys_a = Object.keys(val_a as object)
+    const keys_b = Object.keys(val_b as object)
+    return keys_a.length === keys_b.length
+  }
+
+  return false
+}
+
+// Parse a raw edited string into a typed JSON value
+// Numbers, booleans, and null are auto-detected; everything else stays as string
+export function parse_edited_value(text: string): unknown {
+  const trimmed = text.trim()
+  if (trimmed === `null`) return null
+  if (trimmed === `true`) return true
+  if (trimmed === `false`) return false
+  const num = Number(trimmed)
+  if (trimmed !== `` && Number.isFinite(num)) return num
+  return text
+}
+
+// Set a value at a dot/bracket path in a deep-cloned copy of root
+// root_label is stripped from the path prefix if present
+export function set_at_path(
+  root: unknown,
+  path_str: string,
+  new_value: unknown,
+  root_label?: string,
+): unknown {
+  const segments = parse_path(path_str)
+  const start = root_label && segments[0] === root_label ? 1 : 0
+  if (start >= segments.length) return new_value
+  const cloned = JSON.parse(JSON.stringify(root))
+  let current: Record<string | number, unknown> = cloned
+  for (let idx = start; idx < segments.length - 1; idx++) {
+    const next = current[segments[idx]]
+    if (next === undefined || next === null) return root // bail — path no longer valid
+    current = next as Record<string | number, unknown>
+  }
+  current[segments[segments.length - 1]] = new_value
+  return cloned
+}
+
+// URL regex for auto-detection in string values
+const URL_RE = /^https?:\/\/\S+$/
+
+// CSS color patterns for swatch rendering
+const HEX_COLOR_RE = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i
+const FUNC_COLOR_RE = /^(?:rgba?|hsla?|oklch|oklab|lch|lab|color)\([^)]*\)$/i
+
+// Check if a string is a URL
+export const is_url = (str: string): boolean => URL_RE.test(str.trim())
+
+// Check if a string looks like a CSS color value
+// Rejects strings with semicolons to prevent CSS injection
+export function is_css_color(str: string): boolean {
+  const trimmed = str.trim()
+  if (trimmed.includes(`;`)) return false
+  return HEX_COLOR_RE.test(trimmed) || FUNC_COLOR_RE.test(trimmed)
+}
+
+// Estimate the serialized byte size of a value (rough approximation)
+// Uses max_depth to avoid expensive deep recursion on large trees
+export function estimate_byte_size(
+  value: unknown,
+  max_depth: number = 4,
+  current_depth: number = 0,
+): number {
+  if (current_depth >= max_depth) return 10
+  const type = get_value_type(value)
+  if (type === `null`) return 4
+  if (type === `undefined`) return 9
+  if (type === `boolean`) return value ? 4 : 5
+  if (type === `number` || type === `bigint`) return String(value).length
+  if (type === `string`) return (value as string).length + 2
+  if (type === `symbol`) return (value as symbol).toString().length
+  if (type === `function`) return 20
+  if (type === `date`) return 24
+  if (type === `regexp`) return (value as RegExp).toString().length
+  if (type === `error`) {
+    return `${(value as Error).name}: ${(value as Error).message}`.length
+  }
+  // Accumulate child sizes for collection types
+  const child_depth = current_depth + 1
+  const child_size = (val: unknown, overhead: number = 1) =>
+    estimate_byte_size(val, max_depth, child_depth) + overhead
+  if (type === `array`) {
+    let size = 2
+    for (const item of value as unknown[]) size += child_size(item)
+    return size
+  }
+  if (type === `object`) {
+    let size = 2
+    for (const [key, val] of Object.entries(value as Record<string, unknown>)) {
+      size += key.length + 4 + child_size(val, 0)
+    }
+    return size
+  }
+  if (type === `map`) {
+    let size = 2
+    for (const [, val] of value as Map<unknown, unknown>) size += child_size(val, 10)
+    return size
+  }
+  if (type === `set`) {
+    let size = 2
+    for (const val of value as Set<unknown>) size += child_size(val)
+    return size
+  }
+  return String(value).length
+}
+
+// Ghost entry for removed diff children
+export interface GhostEntry {
+  key: string | number
+  value: unknown
+  path: string
+}
+
+// Pre-compute a map of parent_path -> removed children from a diff map
+// This avoids O(diff_size) iteration per expanded node
+export function build_ghost_map(diff_map: Map<string, DiffEntry>): Map<string, GhostEntry[]> {
+  const ghost_map = new Map<string, GhostEntry[]>()
+  for (const [diff_path, entry] of diff_map) {
+    if (entry.status !== `removed`) continue
+    const segments = parse_path(diff_path)
+    if (segments.length === 0) continue
+    const parent_path = segments.length === 1 ? `` : format_path(segments.slice(0, -1))
+    const key = segments[segments.length - 1]
+    const ghosts = ghost_map.get(parent_path) ?? []
+    ghosts.push({ key, value: entry.old_value, path: diff_path })
+    ghost_map.set(parent_path, ghosts)
+  }
+  return ghost_map
+}
+
+// Format byte size as human-readable string (e.g., "1.2 KB")
+export function format_byte_size(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+// Compute diff between old and new values, returning path -> DiffEntry map
+// Only paths that differ are included (unchanged paths are omitted)
+export function compute_diff(
+  old_val: unknown,
+  new_val: unknown,
+  current_path: string = ``,
+  result: Map<string, DiffEntry> = new Map(),
+  seen: WeakSet<object> = new WeakSet(),
+): Map<string, DiffEntry> {
+  const old_type = get_value_type(old_val)
+  const new_type = get_value_type(new_val)
+
+  // Different types = changed
+  if (old_type !== new_type) {
+    result.set(current_path, {
+      status: `changed`,
+      path: current_path,
+      old_value: old_val,
+      new_value: new_val,
+    })
+    return result
+  }
+
+  // Both primitive: compare values (with NaN === NaN special case)
+  if (is_primitive_type(old_type)) {
+    const both_nan =
+      typeof old_val === `number` &&
+      typeof new_val === `number` &&
+      Number.isNaN(old_val) &&
+      Number.isNaN(new_val)
+    if (!both_nan && old_val !== new_val) {
+      result.set(current_path, {
+        status: `changed`,
+        path: current_path,
+        old_value: old_val,
+        new_value: new_val,
+      })
+    }
+    return result
+  }
+
+  // Non-expandable special types (date, regexp, etc): compare string forms
+  if (!is_expandable_type(old_type)) {
+    if (String(old_val) !== String(new_val)) {
+      result.set(current_path, {
+        status: `changed`,
+        path: current_path,
+        old_value: old_val,
+        new_value: new_val,
+      })
+    }
+    return result
+  }
+
+  // Prevent circular references
+  if (typeof old_val === `object` && old_val !== null) {
+    if (seen.has(old_val)) return result
+    seen.add(old_val)
+  }
+
+  // Diff two indexed lists element-by-element (shared by array, map, set)
+  function diff_indexed(old_items: unknown[], new_items: unknown[]): void {
+    const max_len = Math.max(old_items.length, new_items.length)
+    for (let idx = 0; idx < max_len; idx++) {
+      const child_path = build_path(current_path, idx)
+      if (idx >= old_items.length) {
+        result.set(child_path, {
+          status: `added`,
+          path: child_path,
+          new_value: new_items[idx],
+        })
+      } else if (idx >= new_items.length) {
+        result.set(child_path, {
+          status: `removed`,
+          path: child_path,
+          old_value: old_items[idx],
+        })
+      } else {
+        compute_diff(old_items[idx], new_items[idx], child_path, result, seen)
+      }
+    }
+  }
+
+  if (old_type === `array`) {
+    diff_indexed(old_val as unknown[], new_val as unknown[])
+    return result
+  }
+
+  // Objects: compare key sets and recurse
+  if (old_type === `object`) {
+    const old_obj = old_val as Record<string, unknown>
+    const new_obj = new_val as Record<string, unknown>
+    const all_keys = new Set([...Object.keys(old_obj), ...Object.keys(new_obj)])
+    for (const key of all_keys) {
+      const child_path = build_path(current_path, key)
+      const in_old = key in old_obj
+      const in_new = key in new_obj
+      if (!in_old) {
+        result.set(child_path, {
+          status: `added`,
+          path: child_path,
+          new_value: new_obj[key],
+        })
+      } else if (!in_new) {
+        result.set(child_path, {
+          status: `removed`,
+          path: child_path,
+          old_value: old_obj[key],
+        })
+      } else {
+        compute_diff(old_obj[key], new_obj[key], child_path, result, seen)
+      }
+    }
+    return result
+  }
+
+  // Maps: wrap entries as { key, value } to match JsonNode.get_children() rendering
+  if (old_type === `map`) {
+    diff_indexed(
+      Array.from((old_val as Map<unknown, unknown>).entries()).map(([key, val]) => ({
+        key,
+        value: val,
+      })),
+      Array.from((new_val as Map<unknown, unknown>).entries()).map(([key, val]) => ({
+        key,
+        value: val,
+      })),
+    )
+    return result
+  }
+  if (old_type === `set`) {
+    diff_indexed(Array.from(old_val as Set<unknown>), Array.from(new_val as Set<unknown>))
+    return result
+  }
+
+  return result
+}