Show Assets toggle (#6985)

* Show Assets toggle

* Fix flow graph not updating when manuallly changing ambiguous asset R/W

frontend/src/lib/components/graph/FlowGraphV2.svelte

@@ -61,6 +61,7 @@
 	import type { AssetWithAltAccessType } from '../assets/lib'
 
 	let useDataflow: Writable<boolean | undefined> = writable<boolean | undefined>(false)
+	let showAssets: Writable<boolean | undefined> = writable<boolean | undefined>(true)
 
 	const triggerContext = getContext<TriggerContext>('TriggerContext')
 
@@ -188,7 +189,8 @@
 	setContext<{
 		selectedId: Writable<string | undefined>
 		useDataflow: Writable<boolean | undefined>
-	}>('FlowGraphContext', { selectedId, useDataflow })
+		showAssets: Writable<boolean | undefined>
+	}>('FlowGraphContext', { selectedId, useDataflow, showAssets })
 
 	if (triggerContext && allowSimplifiedPoll) {
 		if (isSimplifiable(modules)) {
@@ -396,24 +398,32 @@
 		)
 		let newNodes: (Node & NodeLayout)[] = layoutedNodes.map((n) => ({ ...n, ...graph.nodes[n.id] }))
 
-		let assetNodesResult = computeAssetNodes(
-			newNodes.map((n) => ({
-				data: { assets: n.data?.assets as AssetWithAltAccessType[] },
-				id: n.id,
-				position: n.position
+		let assetNodesResult = $showAssets
+			? computeAssetNodes(
+					newNodes.map((n) => ({
+						data: { assets: n.data?.assets as AssetWithAltAccessType[] },
+						id: n.id,
+						position: n.position
+					}))
+				)
+			: undefined
+		if (assetNodesResult) {
+			newNodes = newNodes.map((n) => ({
+				...n,
+				position: assetNodesResult.newNodePositions[n.id]
 			}))
-		)
-		newNodes = newNodes.map((n) => ({
-			...n,
-			position: assetNodesResult.newNodePositions[n.id]
-		}))
+		}
 		let aiToolNodesResult = computeAIToolNodes(newNodes, eventHandler, insertable, flowModuleStates)
 		nodes = [
 			...newNodes.map((n) => ({ ...n, position: aiToolNodesResult.newNodePositions[n.id] })),
-			...assetNodesResult.newAssetNodes,
+			...(assetNodesResult?.newAssetNodes ?? []),
 			...aiToolNodesResult.toolNodes
 		]
-		edges = [...assetNodesResult.newAssetEdges, ...aiToolNodesResult.toolEdges, ...graph.edges]
+		edges = [
+			...(assetNodesResult?.newAssetEdges ?? []),
+			...aiToolNodesResult.toolEdges,
+			...graph.edges
+		]
 
 		await tick()
 		height = Math.max(...nodes.map((n) => n.position.y + NODE.height + 100), minHeight)
@@ -503,7 +513,7 @@
 	})
 
 	$effect(() => {
-		;[graph, allowSimplifiedPoll]
+		;[graph, allowSimplifiedPoll, $showAssets]
 		untrack(() => updateStores())
 	})
 
@@ -611,20 +621,15 @@
 
 				<Controls
 					position="top-left"
-					orientation="horizontal"
+					orientation="vertical"
 					showLock={false}
 					showZoom={false}
 					showFitView={false}
-					class="!shadow-none"
+					class="!shadow-none gap-3"
 				>
+					<Toggle bind:checked={$showAssets} size="xs" options={{ right: 'Assets' }} />
 					{#if showDataflow}
-						<Toggle
-							bind:checked={$useDataflow}
-							size="xs"
-							options={{
-								right: 'Dataflow'
-							}}
-						/>
+						<Toggle bind:checked={$useDataflow} size="xs" options={{ right: 'Dataflow' }} />
 					{/if}
 				</Controls>
 			</SvelteFlow>

frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte

@@ -14,8 +14,9 @@
 	import type { GraphModuleState } from '../../model'
 	import InsertModuleButton from '$lib/components/flows/map/InsertModuleButton.svelte'
 
-	const { useDataflow } = getContext<{
+	const { useDataflow, showAssets } = getContext<{
 		useDataflow: Writable<boolean | undefined>
+		showAssets?: Writable<boolean>
 	}>('FlowGraphContext')
 
 	let {
@@ -81,7 +82,9 @@
 
 <EdgeLabel
 	x={sourceX}
-	y={sourceY + 32 + (data.shouldOffsetInsertBtnDueToAssetNode ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)}
+	y={sourceY +
+		32 +
+		(data.shouldOffsetInsertBtnDueToAssetNode && $showAssets ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)}
 	class="base-edge"
 	style=""
 >

frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte

@@ -206,7 +206,7 @@
 			newAssetEdges: allAssetEdges,
 			newNodePositions: Object.fromEntries(sortedNewNodes.map((n) => [n.id, n.position]))
 		}
-		computeAssetNodesCache = [nodes, ret]
+		computeAssetNodesCache = [clone(nodes), ret]
 		return ret
 	}
 </script>
@@ -226,7 +226,7 @@
 	import { getContext } from 'svelte'
 	import ExploreAssetButton, { assetCanBeExplored } from '../../../ExploreAssetButton.svelte'
 	import { Tooltip } from '$lib/components/meltComponents'
-	import { pluralize } from '$lib/utils'
+	import { clone, pluralize } from '$lib/utils'
 	import AssetGenericIcon from '$lib/components/icons/AssetGenericIcon.svelte'
 	import type { Edge, Node } from '@xyflow/svelte'
 

frontend/src/lib/utils.ts

@@ -1522,7 +1522,7 @@ export function scroll_into_view_if_needed_polyfill(elem: Element, centerIfNeede
 	return observer // return for testing
 }
 
-// Structured clone raises an error on $state values
+// Structured clone raises an error on $state values and some stuff like Window
 // $state.snapshot clones everything but prints warnings for some values (e.g. functions)
 import _clone from 'clone'
 export function clone<T>(t: T): T {