matterviz 0.4.1 → 0.4.3

package/dist/layout/json-tree/JsonTree.svelte

@@ -1,18 +1,14 @@
 <script lang="ts">
   import Icon from '../../Icon.svelte'
   import { download } from '../../io/fetch'
+  import { parse_path } from '../../json-path'
   import { make_change_detector } from '../../utils'
   import { setContext, tick } from 'svelte'
   import { highlight_matches, tooltip } from 'svelte-multiselect/attachments'
   import type { HTMLAttributes } from 'svelte/elements'
   import { SvelteSet } from 'svelte/reactivity'
   import JsonNode from './JsonNode.svelte'
-  import type {
-    CopyEventPosition,
-    DiffEntry,
-    JsonTreeContext,
-    JsonTreeProps,
-  } from './types'
+  import type { CopyEventPosition, DiffEntry, JsonTreeContext, JsonTreeProps } from './types'
   import { JSON_TREE_CONTEXT_KEY } from './types'
   import {
     build_ghost_map,
@@ -21,7 +17,6 @@
     find_matching_paths,
     format_preview,
     get_ancestor_paths,
-    parse_path,
     serialize_for_copy,
   } from './utils'
 
@@ -50,15 +45,14 @@
     editable = false,
     onchange,
     ...rest
-  }: JsonTreeProps & Omit<HTMLAttributes<HTMLDivElement>, `onselect` | `onchange`> =
-    $props()
+  }: JsonTreeProps & Omit<HTMLAttributes<HTMLDivElement>, `onselect` | `onchange`> = $props()
 
   // Internal state
   let search_query = $state(``)
   let search_input_value = $state(``)
   let focused_path = $state<string | null>(null)
   // Use Set for O(1) lookup/add/delete instead of O(n) array operations
-  let registered_paths_set = $state(new Set<string>())
+  const registered_paths_set = new SvelteSet<string>()
   let registered_paths_list = $state<string[]>([]) // ordered list for keyboard nav
   let copy_feedback_path = $state<string | null>(null)
   let copy_feedback_error = $state(false)
@@ -72,16 +66,14 @@
   // Reference to the search input for focus management
   let search_input_element: HTMLInputElement | undefined = $state()
   // Context menu state (null when closed)
-  let context_menu_state = $state<
-    {
-      x: number
-      y: number
-      path: string
-      value: unknown
-      expandable: boolean
-      is_collapsed: boolean
-    } | null
-  >(null)
+  let context_menu_state = $state<{
+    x: number
+    y: number
+    path: string
+    value: unknown
+    expandable: boolean
+    is_collapsed: boolean
+  } | null>(null)
   // Pinned paths for quick reference
   let pinned_paths = $state(new SvelteSet<string>())
   // Selection state for bulk operations
@@ -94,14 +86,16 @@
   $effect.pre(() => {
     if (!value_changed(value)) return
     focused_path = null
-    registered_paths_set = new Set()
+    registered_paths_set.clear()
     registered_paths_list = []
     copy_feedback_path = null
     copy_feedback_error = false
     context_menu_state = null
     force_expanded = new SvelteSet()
     const valid_paths = new SvelteSet(collect_all_paths(value, root_label ?? ``))
-    collapsed_paths = new SvelteSet([...collapsed_paths].filter((path) => valid_paths.has(path)))
+    collapsed_paths = new SvelteSet(
+      [...collapsed_paths].filter((path) => valid_paths.has(path)),
+    )
     pinned_paths = new SvelteSet()
     selected_paths = new SvelteSet()
     last_selected_path = null
@@ -153,31 +147,10 @@
       current_match_index = -1
       return
     }
-    const paths_to_expand = new Set<string>()
-    for (const match of search_matches) {
-      for (const ancestor of get_ancestor_paths(match)) {
-        paths_to_expand.add(ancestor)
-      }
-    }
-    let collapsed_changed = false
-    let force_expanded_changed = false
-    for (const path_to_expand of paths_to_expand) {
-      if (collapsed_paths.has(path_to_expand)) {
-        collapsed_paths.delete(path_to_expand)
-        collapsed_changed = true
-      }
-      // Also add to force_expanded to override auto-fold thresholds (depth/size)
-      if (!force_expanded.has(path_to_expand)) {
-        force_expanded.add(path_to_expand)
-        force_expanded_changed = true
-      }
-    }
-    if (collapsed_changed) {
-      collapsed_paths = new SvelteSet(collapsed_paths)
-    }
-    if (force_expanded_changed) {
-      force_expanded = new SvelteSet(force_expanded)
-    }
+    const paths_to_expand = new Set([...search_matches].flatMap(get_ancestor_paths))
+    // Also add to force_expanded to override auto-fold thresholds (depth/size)
+    // Only reassign (which rerenders every node) the sets that actually changed
+    set_collapsed(paths_to_expand, () => false)
     // Wait for DOM to update before scrolling to match
     await tick()
     if (sorted_matches.length > 0) {
@@ -211,53 +184,57 @@
   // Navigate to previous match
   function go_to_prev_match(): void {
     if (sorted_matches.length === 0) return
-    current_match_index = (current_match_index - 1 + sorted_matches.length) %
-      sorted_matches.length
+    current_match_index =
+      (current_match_index - 1 + sorted_matches.length) % sorted_matches.length
     scroll_to_current_match()
   }
 
   // Previous values map for change detection
   const prev_values = new Map<string, unknown>()
 
-  // Toggle collapse - tracks force_expanded to override auto-fold thresholds
-  function toggle_collapse(path: string, is_currently_collapsed: boolean): void {
-    if (is_currently_collapsed) {
-      collapsed_paths.delete(path)
-      force_expanded.add(path)
-    } else {
-      force_expanded.delete(path)
-      collapsed_paths.add(path)
+  // Move each path into collapsed or force_expanded (which overrides auto-fold
+  // thresholds), then reassign only the sets that changed (reassignment rerenders
+  // every node subscribed to the set's identity)
+  function set_collapsed(paths: Iterable<string>, collapse: (path: string) => boolean) {
+    let collapsed_changed = false
+    let force_expanded_changed = false
+    for (const path of paths) {
+      if (collapse(path)) {
+        force_expanded_changed = force_expanded.delete(path) || force_expanded_changed
+        collapsed_changed = !collapsed_paths.has(path) || collapsed_changed
+        collapsed_paths.add(path)
+      } else {
+        collapsed_changed = collapsed_paths.delete(path) || collapsed_changed
+        force_expanded_changed = !force_expanded.has(path) || force_expanded_changed
+        force_expanded.add(path)
+      }
     }
-    collapsed_paths = new SvelteSet(collapsed_paths)
-    force_expanded = new SvelteSet(force_expanded)
+    if (collapsed_changed) collapsed_paths = new SvelteSet(collapsed_paths)
+    if (force_expanded_changed) force_expanded = new SvelteSet(force_expanded)
+  }
+
+  function toggle_collapse(path: string, is_currently_collapsed: boolean): void {
+    set_collapsed([path], () => !is_currently_collapsed)
   }
 
   // Toggle collapse recursively for all descendants
   function toggle_collapse_recursive(path: string, collapse: boolean): void {
-    for (const desc of get_descendants(path)) {
-      if (collapse) {
-        force_expanded.delete(desc)
-        collapsed_paths.add(desc)
-      } else {
-        collapsed_paths.delete(desc)
-        force_expanded.add(desc)
-      }
-    }
-    collapsed_paths = new SvelteSet(collapsed_paths)
-    force_expanded = new SvelteSet(force_expanded)
+    set_collapsed(get_descendants(path), () => collapse)
   }
 
   // Get all descendant paths of a given path (including the path itself)
   function get_descendants(target_path: string): string[] {
     const all_paths = collect_all_paths(value, root_path)
-    const descendants = target_path === `` ? all_paths : all_paths.filter(
-      (entry) =>
-        entry === target_path || entry.startsWith(`${target_path}.`) ||
-        entry.startsWith(`${target_path}[`),
-    )
-    return descendants.includes(target_path)
-      ? descendants
-      : [target_path, ...descendants]
+    const descendants =
+      target_path === ``
+        ? all_paths
+        : all_paths.filter(
+            (entry) =>
+              entry === target_path ||
+              entry.startsWith(`${target_path}.`) ||
+              entry.startsWith(`${target_path}[`),
+          )
+    return descendants.includes(target_path) ? descendants : [target_path, ...descendants]
   }
 
   function expand_all(): void {
@@ -277,9 +254,8 @@
 
     for (const path of all_paths) {
       const segments = parse_path(path)
-      const depth = root_label && segments[0] === root_label
-        ? segments.length - 1
-        : segments.length
+      const depth =
+        root_label && segments[0] === root_label ? segments.length - 1 : segments.length
       ;(depth >= level ? new_collapsed : new_expanded).add(path)
     }
 
@@ -303,7 +279,8 @@
       await navigator.clipboard.writeText(text)
       copy_feedback_error = false
       oncopy?.(path, text)
-    } catch { // Clipboard API failed - still show feedback but as error
+    } catch {
+      // Clipboard API failed - still show feedback but as error
       copy_feedback_error = true
     }
     copy_feedback_path = path // Show feedback regardless of success/failure
@@ -362,19 +339,9 @@
   // Pre-compute ghost children map for O(1) lookup per node
   let ghost_map = $derived(diff_map ? build_ghost_map(diff_map) : new Map())
 
-  // Collapse all descendants but keep the given node expanded (single batch)
+  // Collapse all descendants but keep the given node expanded
   function collapse_children_only(target_path: string): void {
-    for (const desc of get_descendants(target_path)) {
-      if (desc === target_path) {
-        collapsed_paths.delete(desc)
-        force_expanded.add(desc)
-      } else {
-        force_expanded.delete(desc)
-        collapsed_paths.add(desc)
-      }
-    }
-    collapsed_paths = new SvelteSet(collapsed_paths)
-    force_expanded = new SvelteSet(force_expanded)
+    set_collapsed(get_descendants(target_path), (desc) => desc !== target_path)
   }
 
   // Context menu handlers
@@ -421,9 +388,7 @@
       const start_idx = registered_paths_list.indexOf(last_selected_path)
       const end_idx = registered_paths_list.indexOf(select_path)
       if (start_idx !== -1 && end_idx !== -1) {
-        const [from, to] = start_idx < end_idx
-          ? [start_idx, end_idx]
-          : [end_idx, start_idx]
+        const [from, to] = start_idx < end_idx ? [start_idx, end_idx] : [end_idx, start_idx]
         for (let idx = from; idx <= to; idx++) {
           selected_paths.add(registered_paths_list[idx])
         }
@@ -518,6 +483,13 @@
 
   // Keyboard navigation at tree level
   function handle_tree_keydown(event: KeyboardEvent) {
+    // F3 navigates search matches (search input handles its own F3/Enter)
+    if (event.key === `F3`) {
+      event.preventDefault()
+      if (event.shiftKey) go_to_prev_match()
+      else go_to_next_match()
+      return
+    }
     // Escape closes context menu first, then clears selection
     if (event.key === `Escape`) {
       if (context_menu_state) {
@@ -606,15 +578,7 @@
   role="tree"
   aria-label="JSON tree viewer"
   {...rest}
-  onkeydown={(event) => {
-    handle_tree_keydown(event)
-    // F3 at tree level for match navigation
-    if (event.key === `F3`) {
-      event.preventDefault()
-      if (event.shiftKey) go_to_prev_match()
-      else go_to_next_match()
-    }
-  }}
+  onkeydown={handle_tree_keydown}
 >
   {#if show_header}
     <header class="json-tree-header">
@@ -661,9 +625,7 @@
           >
             <Icon icon="ArrowDown" style="width: 12px; height: 12px" />
           </button>
-          <span class="match-count">{current_match_index + 1} of {
-              sorted_matches.length
-            }</span>
+          <span class="match-count">{current_match_index + 1} of {sorted_matches.length}</span>
         </div>
       {/if}
       <div class="controls">
@@ -691,38 +653,19 @@
         <button type="button" onclick={expand_all} title="Expand all" {@attach tooltip()}>
           <Icon icon="Expand" style="width: 14px; height: 14px" />
         </button>
-        <button
-          type="button"
-          onclick={collapse_all}
-          title="Collapse all"
-          {@attach tooltip()}
-        >
+        <button type="button" onclick={collapse_all} title="Collapse all" {@attach tooltip()}>
           <Icon icon="Collapse" style="width: 14px; height: 14px" />
         </button>
-        <button
-          type="button"
-          onclick={() => collapse_to_level(1)}
-          title="Collapse to level 1"
-          {@attach tooltip()}
-        >
-          1
-        </button>
-        <button
-          type="button"
-          onclick={() => collapse_to_level(2)}
-          title="Collapse to level 2"
-          {@attach tooltip()}
-        >
-          2
-        </button>
-        <button
-          type="button"
-          onclick={() => collapse_to_level(3)}
-          title="Collapse to level 3"
-          {@attach tooltip()}
-        >
-          3
-        </button>
+        {#each [1, 2, 3] as level (level)}
+          <button
+            type="button"
+            onclick={() => collapse_to_level(level)}
+            title="Collapse to level {level}"
+            {@attach tooltip()}
+          >
+            {level}
+          </button>
+        {/each}
       </div>
       <div class="divider"></div>
       <div class="controls">
@@ -780,18 +723,16 @@
             type="button"
             class="pinned-path"
             onclick={() =>
-            copy_to_clipboard(
-              pinned_path,
-              serialize_for_copy(get_value_at_path(pinned_path)),
-            )}
+              copy_to_clipboard(
+                pinned_path,
+                serialize_for_copy(get_value_at_path(pinned_path)),
+              )}
             title="Click to copy value"
             {@attach tooltip()}
           >
             {pinned_path}
           </button>
-          <span class="pinned-value">{
-            format_preview(get_value_at_path(pinned_path))
-          }</span>
+          <span class="pinned-value">{format_preview(get_value_at_path(pinned_path))}</span>
           <button
             type="button"
             class="unpin-btn"
@@ -821,8 +762,8 @@
       class="copy-feedback"
       class:error={copy_feedback_error}
       style={copy_feedback_pos
-      ? `left: ${copy_feedback_pos.x}px; top: ${copy_feedback_pos.y - 24}px`
-      : `right: 8px; top: 8px`}
+        ? `left: ${copy_feedback_pos.x}px; top: ${copy_feedback_pos.y - 24}px`
+        : `right: 8px; top: 8px`}
     >
       {copy_feedback_error ? `Copy failed` : `Copied!`}
     </div>
@@ -850,9 +791,7 @@
         <button
           type="button"
           onclick={() =>
-          ctx_menu_action((st) =>
-            copy_to_clipboard(st.path, serialize_for_copy(st.value))
-          )}
+            ctx_menu_action((st) => copy_to_clipboard(st.path, serialize_for_copy(st.value)))}
         >
           <Icon icon="Copy" style="width: 12px; height: 12px" /> Copy value
         </button>
@@ -871,11 +810,11 @@
           <button
             type="button"
             onclick={() =>
-            ctx_menu_action((st) =>
-              st.is_collapsed
-                ? toggle_collapse_recursive(st.path, false)
-                : collapse_children_only(st.path)
-            )}
+              ctx_menu_action((st) =>
+                st.is_collapsed
+                  ? toggle_collapse_recursive(st.path, false)
+                  : collapse_children_only(st.path),
+              )}
           >
             {context_menu_state.is_collapsed ? `Expand` : `Collapse`} all children
           </button>
@@ -883,10 +822,7 @@
         <li class="separator"></li>
       {/if}
       <li>
-        <button
-          type="button"
-          onclick={() => ctx_menu_action((st) => toggle_pin(st.path))}
-        >
+        <button type="button" onclick={() => ctx_menu_action((st) => toggle_pin(st.path))}>
           {pinned_paths.has(context_menu_state.path) ? `Unpin` : `Pin`} this path
         </button>
       </li>
@@ -930,9 +866,6 @@
     border-radius: var(--jt-border-radius, 4px);
     overflow: hidden;
   }
-  /* --jt-header-bg, --jt-header-border, --jt-btn-bg, --jt-btn-hover-bg, --jt-btn-active-bg
-     intentionally removed in favor of transparent/opacity-based button styling.
-     Use --jt-hover-bg to customize the button hover background. */
   .json-tree-header {
     display: flex;
     align-items: center;
@@ -1006,7 +939,9 @@
     font-weight: 500;
     color: inherit;
     opacity: 0.6;
-    transition: opacity 0.15s, background 0.15s;
+    transition:
+      opacity 0.15s,
+      background 0.15s;
   }
   .controls button:hover {
     opacity: 1;
@@ -1144,18 +1079,12 @@
     font: inherit;
   }
   .context-menu button:hover {
-    background: var(
-      --jt-ctx-hover,
-      light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1))
-    );
+    background: var(--jt-ctx-hover, light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1)));
   }
   .context-menu .separator {
     height: 1px;
     margin: 4px 8px;
-    background: var(
-      --jt-ctx-border,
-      light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1))
-    );
+    background: var(--jt-ctx-border, light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)));
   }
   .pinned-panel :where(button) {
     background: none;

package/dist/layout/json-tree/JsonValue.svelte

@@ -28,12 +28,8 @@
 
   // Expanded state for long strings
   let is_expanded = $state(false)
-
-  // Extract max_string_length threshold for reuse
   let max_len = $derived(ctx?.settings.max_string_length ?? 200)
-  let is_long_string = $derived(
-    value_type === `string` && (value as string).length > max_len,
-  )
+  let is_long_string = $derived(value_type === `string` && (value as string).length > max_len)
 
   // Check for changes on mount and when value changes
   $effect(() => {
@@ -86,20 +82,13 @@
 
   // Format display value - strings use custom truncation, others use format_preview
   let display_value = $derived.by(() => {
-    if (value_type === `circular`) return `[Circular]`
     if (value_type === `string`) {
       const str = value as string
-      return is_long_string && !is_expanded
-        ? `"${str.slice(0, max_len)}..."`
-        : `"${str}"`
+      return is_long_string && !is_expanded ? `"${str.slice(0, max_len)}..."` : `"${str}"`
     }
     return format_preview(value)
   })
 
-  // Check if string is truncated
-  let is_truncated = $derived(is_long_string && !is_expanded)
-
-  // Toggle string expansion
   function toggle_expand(event: MouseEvent) {
     event.stopPropagation()
     is_expanded = !is_expanded
@@ -190,27 +179,17 @@
     {:else}
       {display_value}
     {/if}
-    {#if is_truncated}
+    {#if is_long_string}
       <button
         type="button"
         class="expand-btn"
         onclick={toggle_expand}
-        title="Show full string"
+        title={is_expanded ? `Collapse string` : `Show full string`}
       >
-        ...
-      </button>
-    {:else if is_long_string && is_expanded}
-      <button
-        type="button"
-        class="expand-btn"
-        onclick={toggle_expand}
-        title="Collapse string"
-      >
-        ▲
+        {is_expanded ? `▲` : `...`}
       </button>
     {/if}
-    {#if ctx?.settings.show_data_types && value_type !== `null` &&
-      value_type !== `undefined`}
+    {#if ctx?.settings.show_data_types && value_type !== `null` && value_type !== `undefined`}
       <span class="type-annotation">{value_type}</span>
     {/if}
   </span>
@@ -235,7 +214,9 @@
   .json-value {
     cursor: pointer;
     border-radius: 2px;
-    transition: background-color 0.15s, color 0.15s;
+    transition:
+      background-color 0.15s,
+      color 0.15s;
     &:hover {
       background: var(
         --jt-hover-bg,
@@ -267,10 +248,6 @@
     &.error {
       color: var(--jt-error, light-dark(#a31515, #f48771));
     }
-    &.circular {
-      color: var(--jt-circular, light-dark(#808080, #808080));
-      font-style: italic;
-    }
     &.changed {
       animation: value-change 1s ease-out;
     }

package/dist/layout/json-tree/utils.d.ts

@@ -4,15 +4,12 @@ export declare const is_expandable_type: (value_type: JsonValueType) => boolean;
 export declare const is_primitive_type: (value_type: JsonValueType) => boolean;
 export declare const is_expandable: (value: unknown) => boolean;
 export declare function get_child_count(value: unknown): number;
-export declare function format_path(segments: (string | number)[]): string;
-export declare function build_path(parent_path: string, key: string | number): string;
 export declare function serialize_for_copy(value: unknown): string;
 export declare function format_preview(value: unknown, max_length?: number): string;
 export declare function matches_search(path: string, key: string | number | null, value: unknown, query: string): boolean;
 export declare function collect_all_paths(value: unknown, current_path?: string, max_depth?: number, current_depth?: number, seen?: WeakSet<object>): string[];
 export declare function find_matching_paths(value: unknown, query: string, current_path?: string, current_key?: string | number | null, seen?: WeakSet<object>): Set<string>;
 export declare function get_ancestor_paths(path: string): string[];
-export declare function parse_path(path: string): (string | number)[];
 export declare function values_equal(val_a: unknown, val_b: unknown): boolean;
 export declare function parse_edited_value(text: string): unknown;
 export declare function set_at_path(root: unknown, path_str: string, new_value: unknown, root_label?: string): unknown;