this code very faster

esbuild.config.mjs

@@ -3,13 +3,41 @@ import esbuild from "esbuild";
 import esbuildSvelte from "esbuild-svelte";
 import process from "process";
 import sveltePreprocess from "svelte-preprocess";
+import path from 'node:path';
+import fs from 'node:fs';
 
 const banner = `/*
 THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
 if you want to view the source, please visit the github repository of this plugin
 */
 `;
 
+const wasmPlugin = {
+	name: 'wasm',
+	setup(build) {
+		// Resolve ".wasm" files to a path with a namespace
+		build.onResolve({ filter: /\.wasm$/ }, args => {
+			if (args.resolveDir === '') {
+				return; // Ignore unresolvable paths
+			}
+			return {
+				path: path.isAbsolute(args.path) ? args.path : path.join(args.resolveDir, args.path),
+				namespace: 'wasm-binary',
+			};
+		});
+
+		// Virtual modules in the "wasm-binary" namespace contain the
+		// actual bytes of the WebAssembly file. This uses esbuild's
+		// built-in "binary" loader instead of manually embedding the
+		// binary data inside JavaScript code ourselves.
+		build.onLoad({ filter: /.*/, namespace: 'wasm-binary' }, async args => ({
+			contents: await fs.promises.readFile(args.path),
+			loader: 'binary',
+		}));
+	},
+};
+
+
 const prod = process.argv[2] === "production";
 
 const context = await esbuild.context({
@@ -45,6 +73,7 @@ const context = await esbuild.context({
 			compilerOptions: { css: true },
 			preprocess: sveltePreprocess(),
 		}),
+		wasmPlugin,
 	],
 });
 

src/commands/list_index/index.ts

@@ -1,5 +1,5 @@
 import type { EdgeSortId } from "src/const/graph";
-import type { BCGraph, EdgeAttribute } from "src/graph/MyMultiGraph";
+import type { EdgeAttribute } from "src/graph/MyMultiGraph";
 import { Traverse, type EdgeTree } from "src/graph/traverse";
 import {
 	get_edge_sorter,
@@ -11,6 +11,7 @@ import type { ShowNodeOptions } from "src/interfaces/settings";
 import { Links } from "src/utils/links";
 import { untyped_pick } from "src/utils/objects";
 import { url_search_params } from "src/utils/url";
+import type { NoteGraph, RecTraversalData } from "wasm/pkg/breadcrumbs_graph_wasm";
 
 export namespace ListIndex {
 	export type Options = {
@@ -44,7 +45,7 @@ export namespace ListIndex {
 	};
 
 	export const edge_tree_to_list_index = (
-		tree: EdgeTree[],
+		tree: RecTraversalData[],
 		options: Pick<
 			Options,
 			"link_kind" | "indent" | "show_node_options" | "show_attributes"
@@ -54,20 +55,15 @@ export namespace ListIndex {
 		const real_indent = options.indent.replace(/\\t/g, "\t");
 
 		tree.forEach(({ children, depth, edge }) => {
-			const display = stringify_node(edge.target_id, edge.target_attr, {
+			const display = stringify_node(edge.target, {
 				show_node_options: options.show_node_options,
 			});
 
-			const link = Links.ify(edge.target_id, display, {
+			const link = Links.ify(edge.target.path, display, {
 				link_kind: options.link_kind,
 			});
 
-			const attr = options.show_attributes.length
-				? ` (${url_search_params(
-						untyped_pick(edge.attr, options.show_attributes),
-						{ trim_lone_param: true },
-					)})`
-				: "";
+			const attr = edge.get_attribute_label(options.show_attributes);
 
 			index += real_indent.repeat(depth) + `- ${link}${attr}\n`;
 
@@ -77,8 +73,9 @@ export namespace ListIndex {
 		return index;
 	};
 
+	// TODO
 	export const build = (
-		graph: BCGraph,
+		graph: NoteGraph,
 		start_node: string,
 		options: Options,
 	) =>

src/components/EdgeLink.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
 	import ObsidianLink from "src/components/ObsidianLink.svelte";
-	import type { BCEdge } from "src/graph/MyMultiGraph";
 	import { stringify_node } from "src/graph/utils";
 	import type { ShowNodeOptions } from "src/interfaces/settings";
 	import BreadcrumbsPlugin from "src/main";
+	import type { EdgeStruct } from "wasm/pkg/breadcrumbs_graph_wasm";
 
-	export let edge: Pick<BCEdge, "attr" | "target_id" | "target_attr">;
+	export let edge: EdgeStruct;
 	export let plugin: BreadcrumbsPlugin;
 	export let show_node_options: ShowNodeOptions;
 	export let cls = "";
 
+	let target_node = edge.target;
+
 	const { dendron_note } = plugin.settings.explicit_edge_sources;
 
-	const display = stringify_node(edge.target_id, edge.target_attr, {
+	const display = stringify_node(target_node, {
 		show_node_options,
 		trim_basename_delimiter:
 			dendron_note.enabled && dendron_note.display_trimmed
@@ -24,9 +26,9 @@
 <ObsidianLink
 	{plugin}
 	{display}
-	path={edge.target_id}
-	resolved={edge.target_attr.resolved}
-	cls="{cls} BC-edge {edge.attr.explicit
+	path={target_node.path}
+	resolved={target_node.resolved}
+	cls="{cls} BC-edge {!edge.implied
 		? 'BC-edge-explicit'
-		: `BC-edge-implied BC-edge-implied-${edge.attr.implied_kind}`}"
+		: `BC-edge-implied BC-edge-implied-${edge.edge_source}`}"
 />

src/components/NestedEdgeList.svelte

@@ -1,18 +1,16 @@
 <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";
+	import type { RecTraversalData } from "wasm/pkg/breadcrumbs_graph_wasm";
 
 	export let plugin: BreadcrumbsPlugin;
 
-	export let tree: EdgeTree[];
+	export let tree: RecTraversalData[];
 
 	export let open_signal: boolean | null;
 	export let show_node_options: ShowNodeOptions;
@@ -51,10 +49,7 @@
 
 			{#if show_attributes?.length}
 				<TreeItemFlair
-					label={url_search_params(
-						untyped_pick(item.edge.attr, show_attributes),
-						{ trim_lone_param: true },
-					)}
+					label={item.edge.get_attribute_label(show_attributes)}
 				/>
 			{/if}
 		</summary>

src/components/codeblocks/CodeblockMermaid.svelte

@@ -27,91 +27,101 @@
 	export let errors: BreadcrumbsError[];
 	export let file_path: string;
 
-	const sort = get_edge_sorter(
-		// @ts-expect-error: ts(2345)
-		options.sort,
-		plugin.graph,
-	);
-
-	let traversal_items: TraversalStackItem[] = [];
-	let distances: Map<string, number> = new Map();
-
-	// if the file_path is an empty string, so the code block is not rendered inside note, we fall back to the active file store
-	$: source_path = file_path
-		? file_path
-		: $active_file_store
-			? $active_file_store.path
-			: "";
-
-	// this is an exposed function that we can call from the outside to update the codeblock
-	export const update = () => {
-		traversal_items = get_traversal_items();
-		distances = Distance.from_traversal_items(traversal_items);
-	};
+	let mermaid: string = "";
 
-	const base_traversal = (attr: EdgeAttrFilters) =>
-		Traverse.gather_items(plugin.graph, source_path, (item) =>
-			has_edge_attrs(item.edge, {
-				...attr,
-				$or_target_ids: options["dataview-from-paths"],
-			}),
-		);
-
-	const edge_field_labels =
-		options.fields ?? plugin.settings.edge_fields.map((f) => f.label);
-
-	const get_traversal_items = () => {
-		if (source_path && plugin.graph.hasNode(source_path)) {
-			return options["merge-fields"]
-				? base_traversal({ $or_fields: options.fields })
-				: edge_field_labels.flatMap((field) =>
-						base_traversal({ field }),
-					);
-		} else {
-			return [];
-		}
+	export const update = () => {
+		// TODO pass all the options and then implement them all the options on the rust side
+		mermaid = plugin.graph.generate_mermaid_graph([file_path], options.fields ?? [], options.depth[1] ?? 100).mermaid;
 	};
 
-	onMount(update);
-
-	$: edges = traversal_items
-		.filter((item) =>
-			is_between(
-				distances.get(item.edge.target_id) ?? 0,
-				options.depth[0] + 1,
-				options.depth[1],
-			),
-		)
-		.map((item) => item.edge)
-		.sort(sort);
-
-	$: mermaid = Mermaid.from_edges(edges, {
-		kind: "graph",
-		click: { method: "class" },
-		active_node_id: source_path,
-		renderer: options["mermaid-renderer"],
-		curve_style: options["mermaid-curve"],
-		direction: options["mermaid-direction"],
-		show_attributes: options["show-attributes"],
-
-		get_node_label: (node_id, _attr) => {
-			const file = plugin.app.vault.getFileByPath(node_id);
-
-			return file
-				? plugin.app.fileManager
-						.generateMarkdownLink(file, source_path)
-						.slice(2, -2)
-				: Paths.drop_ext(
-						Links.resolve_to_absolute_path(
-							plugin.app,
-							node_id,
-							source_path,
-						),
-					);
-		},
+	onMount(() => {
+		update();
 	});
-
-	$: log.debug(mermaid);
+
+	// const sort = get_edge_sorter(
+	// 	// @ts-expect-error: ts(2345)
+	// 	options.sort,
+	// 	plugin.graph,
+	// );
+
+	// let traversal_items: TraversalStackItem[] = [];
+	// let distances: Map<string, number> = new Map();
+
+	// // if the file_path is an empty string, so the code block is not rendered inside note, we fall back to the active file store
+	// $: source_path = file_path
+	// 	? file_path
+	// 	: $active_file_store
+	// 		? $active_file_store.path
+	// 		: "";
+
+	// // this is an exposed function that we can call from the outside to update the codeblock
+	// export const update = () => {
+	// 	traversal_items = get_traversal_items();
+	// 	distances = Distance.from_traversal_items(traversal_items);
+	// };
+
+	// const base_traversal = (attr: EdgeAttrFilters) =>
+	// 	Traverse.gather_items(plugin.graph, source_path, (item) =>
+	// 		has_edge_attrs(item.edge, {
+	// 			...attr,
+	// 			$or_target_ids: options["dataview-from-paths"],
+	// 		}),
+	// 	);
+
+	// const edge_field_labels =
+	// 	options.fields ?? plugin.settings.edge_fields.map((f) => f.label);
+
+	// const get_traversal_items = () => {
+	// 	if (source_path && plugin.graph.hasNode(source_path)) {
+	// 		return options["merge-fields"]
+	// 			? base_traversal({ $or_fields: options.fields })
+	// 			: edge_field_labels.flatMap((field) =>
+	// 					base_traversal({ field }),
+	// 				);
+	// 	} else {
+	// 		return [];
+	// 	}
+	// };
+
+	// onMount(update);
+
+	// $: edges = traversal_items
+	// 	.filter((item) =>
+	// 		is_between(
+	// 			distances.get(item.edge.target_id) ?? 0,
+	// 			options.depth[0] + 1,
+	// 			options.depth[1],
+	// 		),
+	// 	)
+	// 	.map((item) => item.edge)
+	// 	.sort(sort);
+
+	// $: mermaid = Mermaid.from_edges(edges, {
+	// 	kind: "graph",
+	// 	click: { method: "class" },
+	// 	active_node_id: source_path,
+	// 	renderer: options["mermaid-renderer"],
+	// 	direction: options["mermaid-direction"],
+	// 	show_attributes: options["show-attributes"],
+
+	// 	get_node_label: (node_id, _attr) => {
+	// 		const file = plugin.app.vault.getFileByPath(node_id);
+
+	// 		return file
+	// 			? plugin.app.fileManager
+	// 					.generateMarkdownLink(file, source_path)
+	// 					.slice(2, -2)
+	// 			: Paths.drop_ext(
+	// 					Links.resolve_to_absolute_path(
+	// 						plugin.app,
+	// 						node_id,
+	// 						source_path,
+	// 					),
+	// 				);
+	// 	},
+	// });
+
+	// $: log.debug(mermaid);
 </script>
 
 <div class="BC-codeblock-mermaid">
@@ -123,7 +133,7 @@
 		</h3>
 	{/if}
 
-	{#if traversal_items.length}
+	{#if mermaid}
 		<div class="relative">
 			<div class="absolute left-2 top-2 flex">
 				<CopyToClipboardButton
@@ -157,7 +167,7 @@
 				</button>
 			</div>
 
-			<MermaidDiagram {plugin} {mermaid} {source_path} />
+			<MermaidDiagram {plugin} {mermaid} source_path={file_path} />
 		</div>
 	{:else}
 		<!-- TODO(HELP-MSG) -->