this code very faster

src/components/NestedEdgeList.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
 	import type { EdgeAttribute } from "src/graph/MyMultiGraph";
-	import type { EdgeTree } from "src/graph/traverse";
 	import { type EdgeSorter } from "src/graph/utils";
 	import type { ShowNodeOptions } from "src/interfaces/settings";
 	import type BreadcrumbsPlugin from "src/main";
-	import { untyped_pick } from "src/utils/objects";
-	import { url_search_params } from "src/utils/url";
 	import EdgeLink from "./EdgeLink.svelte";
 	import ChevronOpener from "./button/ChevronOpener.svelte";
 	import TreeItemFlair from "./obsidian/TreeItemFlair.svelte";

src/components/codeblocks/CodeblockTree.svelte

@@ -1,20 +1,16 @@
 <script lang="ts">
 	import type { ICodeblock } from "src/codeblocks/schema";
 	import { ListIndex } from "src/commands/list_index";
-	import { Traverse, type EdgeTree } from "src/graph/traverse";
 	import {
 		get_edge_sorter,
-		has_edge_attrs,
-		type EdgeAttrFilters,
 	} from "src/graph/utils";
 	import type { BreadcrumbsError } from "src/interfaces/graph";
 	import type BreadcrumbsPlugin from "src/main";
-	import { active_file_store } from "src/stores/active_file";
 	import { onMount } from "svelte";
 	import NestedEdgeList from "../NestedEdgeList.svelte";
 	import CopyToClipboardButton from "../button/CopyToClipboardButton.svelte";
 	import CodeblockErrors from "./CodeblockErrors.svelte";
-	import type { RecTraversalData } from "wasm/pkg/breadcrumbs_graph_wasm";
+	import { TraversalOptions, type RecTraversalData } from "wasm/pkg/breadcrumbs_graph_wasm";
 
 	export let plugin: BreadcrumbsPlugin;
 	export let options: ICodeblock["Options"];
@@ -31,10 +27,13 @@
 
 	export const update = () => {
 		tree = plugin.graph.rec_traverse(
-			file_path,
-			options.fields ?? [],
-			options.depth[1] ?? 100,
-		);
+			new TraversalOptions(
+				[file_path],
+				options.fields,
+				options.depth[1] ?? 100,
+				!options["merge-fields"],
+			)
+		).data;
 	};
 
 	onMount(() => {

src/components/page_views/TrailView.svelte

@@ -1,35 +1,45 @@
 <script lang="ts">
-	import { Traverse } from "src/graph/traverse";
-	import { has_edge_attrs, type EdgeAttrFilters } from "src/graph/utils";
 	import type BreadcrumbsPlugin from "src/main";
-	import { remove_duplicates_by } from "src/utils/arrays";
+	import { remove_duplicates_by_equals } from "src/utils/arrays";
 	import { resolve_field_group_labels } from "src/utils/edge_fields";
 	import MergeFieldsButton from "../button/MergeFieldsButton.svelte";
 	import TrailViewGrid from "./TrailViewGrid.svelte";
 	import TrailViewPath from "./TrailViewPath.svelte";
+	import { TraversalOptions } from "wasm/pkg/breadcrumbs_graph_wasm";
 
 	export let plugin: BreadcrumbsPlugin;
 	export let file_path: string;
 
 	// TODO: I've copped-out here, building the view from edge_tree seems crazy hard.
 	// So I just use all_paths
-	const base_traversal = (attr: EdgeAttrFilters) =>
-		Traverse.tree_to_all_paths(
-			Traverse.build_tree(plugin.graph, file_path, {}, (e) =>
-				has_edge_attrs(e, attr),
-			),
-		);
+	// const base_traversal = (attr: EdgeAttrFilters) =>
+	// 	Traverse.tree_to_all_paths(
+	// 		Traverse.build_tree(plugin.graph, file_path, {}, (e) =>
+	// 			has_edge_attrs(e, attr),
+	// 		),
+	// 	);
 
 	$: edge_field_labels = resolve_field_group_labels(
 		plugin.settings.edge_field_groups,
 		plugin.settings.views.page.trail.field_group_labels,
 	);
 
-	$: all_paths = plugin.graph.hasNode(file_path)
-		? plugin.settings.views.page.trail.merge_fields
-			? base_traversal({ $or_fields: edge_field_labels })
-			: edge_field_labels.flatMap((field) => base_traversal({ field }))
-		: [];
+	$: traversal_data = plugin.graph.rec_traverse(
+		new TraversalOptions(
+			[file_path],
+			edge_field_labels,
+			100,
+			!plugin.settings.views.page.trail.merge_fields,
+		),
+	);
+
+	$: all_paths = traversal_data.to_paths();
+
+	// $: all_paths = plugin.graph.hasNode(file_path)
+	// 	? plugin.settings.views.page.trail.merge_fields
+	// 		? base_traversal({ $or_fields: edge_field_labels })
+	// 		: edge_field_labels.flatMap((field) => base_traversal({ field }))
+	// 	: [];
 
 	$: selected_paths =
 		plugin.settings.views.page.trail.selection === "all"
@@ -38,41 +48,49 @@
 				? all_paths.slice(-1)
 				: plugin.settings.views.page.trail.selection === "longest"
 					? all_paths.slice(0, 1)
-					: [[]];
+					: [];
 
-	$: MAX_DEPTH = Math.max(0, ...selected_paths.map((p) => p.length));
+	$: MAX_DEPTH = Math.max(0, ...selected_paths.map((p) => p.length()));
 	$: depth = Math.min(
 		MAX_DEPTH,
 		plugin.settings.views.page.trail.default_depth,
 	);
 
 	// Slice the paths to the chosen max depth.
-	$: sliced_paths = selected_paths.map((path) => path.slice(0, depth));
+	$: selected_paths.forEach((path) => path.truncate(depth));
 
 	// Remove duplicates by the target_ids of the path.
 	$: deduped_paths =
 		// There are no duplicates if the depth is the max depth.
 		// The traversal wouldn't add them in the first place.
 		depth === MAX_DEPTH
-			? sliced_paths
-			: remove_duplicates_by(sliced_paths, (path) =>
-					path.map((p) => p.target_id).join("/"),
-				);
+			? selected_paths
+			: remove_duplicates_by_equals(selected_paths, (a, b) => a.equals(b));
 
 	// NOTE: Only sort after slicing, so that the depth is taken into account.
 	$: sorted_paths = deduped_paths.sort((a, b) => {
-		const len_diff = b.length - a.length;
+		const len_diff = b.length() - a.length();
 
 		// Focus on run-length first
-		if (len_diff !== 0) return len_diff;
+		if (len_diff !== 0) {
+			return len_diff;
+		}
 		// Then focus on the alphabetical order of the target_ids
-		else return a[0].target_id.localeCompare(b[0].target_id);
+		else {
+			const a_target = a.get_first_target();
+			const b_target = b.get_first_target();
+
+			if (a_target === undefined && b_target === undefined) return 0;
+			if (a_target === undefined) return -1;
+			if (b_target === undefined) return 1;
+			else return a_target.localeCompare(b_target);
+		}
 	});
 </script>
 
 <div>
-	{#key sorted_paths}
-		{#if sorted_paths.length}
+	{#key traversal_data}
+		{#if !traversal_data.is_empty()}
 			<div
 				class="mb-1 flex flex-wrap justify-between gap-3"
 				class:hidden={!plugin.settings.views.page.trail.show_controls}

src/components/page_views/TrailViewGrid.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-	import type { BCEdge } from "src/graph/MyMultiGraph";
 	import type BreadcrumbsPlugin from "src/main";
 	import {
 		ensure_square_array,
 		gather_by_runs,
 		transpose,
 	} from "src/utils/arrays";
 	import EdgeLink from "../EdgeLink.svelte";
+	import type { Path } from "wasm/pkg/breadcrumbs_graph_wasm";
 
 	export let plugin: BreadcrumbsPlugin;
-	export let all_paths: BCEdge[][];
+	export let all_paths: Path[];
 
-	const reversed = all_paths.map((path) => [...path].reverse());
+	const reversed = all_paths.map((path) => path.reverse_edges);
 
 	const square = ensure_square_array(reversed, null, true);
 
 	const col_runs = transpose(square).map((col) =>
-		gather_by_runs(col, (e) => (e ? e.target_id : null)),
+		gather_by_runs(col, (e) => (e ? e.target.path : null)),
 	);
 </script>
 

src/components/page_views/TrailViewPath.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
-	import type { BCEdge } from "src/graph/MyMultiGraph";
 	import type BreadcrumbsPlugin from "src/main";
 	import EdgeLink from "../EdgeLink.svelte";
-	import { url_search_params } from "src/utils/url";
-	import { untyped_pick } from "src/utils/objects";
+	import type { Path } from "wasm/pkg/breadcrumbs_graph_wasm";
 
 	export let plugin: BreadcrumbsPlugin;
-	export let all_paths: BCEdge[][];
+	export let all_paths: Path[];
 
-	const reversed = all_paths.map((path) => [...path].reverse());
+	const reversed = all_paths.map((path) => path.reverse_edges);
 </script>
 
 <div class="BC-trail-view flex flex-col gap-1 p-1">
@@ -19,13 +17,11 @@
 					{#if j !== 0}
 						<span
 							class="BC-trail-view-item-separator"
-							aria-label={url_search_params(
-								untyped_pick(edge.attr, [
-									"source",
-									"implied_kind",
-									"round",
-								]),
-							)}
+							aria-label={edge.get_attribute_label([
+								"source",
+								"implied_kind",
+								"round",
+							])}
 						></span>
 					{/if}
 

src/components/side_views/Matrix.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { get_edge_sorter, has_edge_attrs } from "src/graph/utils";
+	import { get_edge_sorter } from "src/graph/utils";
 	import type BreadcrumbsPlugin from "src/main";
 	import { active_file_store } from "src/stores/active_file";
 	import { group_by } from "src/utils/arrays";
@@ -15,6 +15,7 @@
 	let { edge_sort_id, field_group_labels, show_attributes } =
 		plugin.settings.views.side.matrix;
 
+
 	$: edge_field_labels = resolve_field_group_labels(
 		plugin.settings.edge_field_groups,
 		field_group_labels,
@@ -24,20 +25,40 @@
 		$active_file_store &&
 		// Even tho we ensure the graph is built before the views are registered,
 		// Existing views still try render before the graph is built.
-		plugin.graph.hasNode($active_file_store.path)
+		plugin.graph.has_node($active_file_store.path)
 			? group_by(
 					plugin.graph
-						.get_out_edges($active_file_store.path)
-						.filter((e) =>
-							has_edge_attrs(e, {
-								$or_fields: edge_field_labels,
-							}),
-						),
-					(e) => e.attr.field,
+						.get_outgoing_edges($active_file_store.path)
+						.filter((e) => e.matches_edge_filter(edge_field_labels)),
+					(e) => e.edge_type,	
 				)
 			: null;
 
-	$: sort = get_edge_sorter(edge_sort_id, plugin.graph);
+	$: sort = get_edge_sorter(edge_sort_id);
+
+	// $: edge_field_labels = resolve_field_group_labels(
+	// 	plugin.settings.edge_field_groups,
+	// 	field_group_labels,
+	// );
+
+	// $: grouped_out_edges =
+	// 	$active_file_store &&
+	// 	// Even tho we ensure the graph is built before the views are registered,
+	// 	// Existing views still try render before the graph is built.
+	// 	plugin.graph.hasNode($active_file_store.path)
+	// 		? group_by(
+	// 				plugin.graph
+	// 					.get_out_edges($active_file_store.path)
+	// 					.filter((e) =>
+	// 						has_edge_attrs(e, {
+	// 							$or_fields: edge_field_labels,
+	// 						}),
+	// 					),
+	// 				(e) => e.attr.field,
+	// 			)
+	// 		: null;
+
+	// $: sort = get_edge_sorter(edge_sort_id, plugin.graph);
 </script>
 
 <div class="markdown-rendered BC-matrix-view">

src/components/side_views/MatrixEdgeField.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
-	import type { BCEdge, EdgeAttribute } from "src/graph/MyMultiGraph";
+	import type { EdgeAttribute } from "src/graph/MyMultiGraph";
 	import type { EdgeSorter } from "src/graph/utils";
 	import type { EdgeField } from "src/interfaces/settings";
 	import type BreadcrumbsPlugin from "src/main";
-	import { untyped_pick } from "src/utils/objects";
-	import { url_search_params } from "src/utils/url";
 	import EdgeLink from "../EdgeLink.svelte";
 	import ChevronOpener from "../button/ChevronOpener.svelte";
 	import TreeItemFlair from "../obsidian/TreeItemFlair.svelte";
+	import type { EdgeStruct } from "wasm/pkg/breadcrumbs_graph_wasm";
 
-	export let edges: BCEdge[];
+	export let edges: EdgeStruct[];
 	export let field: EdgeField;
 	export let plugin: BreadcrumbsPlugin;
 	// NOTE: These are available on settings, but they're modified in the parent component,
@@ -63,11 +62,8 @@
 
 						<TreeItemFlair
 							cls="font-mono"
-							label={edge.attr.explicit ? "x" : "i"}
-							aria_label={url_search_params(
-								untyped_pick(edge.attr, show_attributes),
-								{ trim_lone_param: true },
-							)}
+							label={edge.implied ? "i" : "x"}
+							aria_label={edge.get_attribute_label(show_attributes)}
 						/>
 					</div>
 				</div>