windmill-components 1.504.6 → 1.511.0

package/package/components/flows/propPicker/OutputPicker.svelte

@@ -46,13 +46,15 @@ function updatePositioning(historyOpen, zoom) {
         placement: 'bottom',
         gutter: 0,
         offset: { mainAxis: 3, crossAxis: 69 * zoom },
-        overflowPadding: historyOpen ? 250 : 8
+        overflowPadding: historyOpen ? 250 : 8,
+        flip: false
     });
     popover?.updatePositioning({
         placement: 'bottom',
         gutter: 0,
         offset: { mainAxis: 3, crossAxis: showInput ? -69 * zoom : 0 },
-        overflowPadding: historyOpen ? 250 : 8
+        overflowPadding: historyOpen ? 250 : 8,
+        flip: false
     });
 }
 $effect(() => {
@@ -104,7 +106,8 @@ onMount(() => {
 						placement: 'bottom',
 						gutter: 0,
 						offset: { mainAxis: 3, crossAxis: 69 },
-						overflowPadding: historyOpen ? 250 : 8
+						overflowPadding: historyOpen ? 250 : 8,
+						flip: false
 					}}
 					usePointerDownOutside
 					closeOnOutsideClick={false}
@@ -139,12 +142,14 @@ onMount(() => {
 					{/snippet}
 				</Popover>
 			{/if}
+
 			<Popover
 				floatingConfig={{
 					placement: 'bottom',
 					gutter: 0,
 					offset: { mainAxis: 3, crossAxis: showInput ? -69 : 0 },
-					overflowPadding: historyOpen ? 250 : 8
+					overflowPadding: historyOpen ? 250 : 8,
+					flip: false
 				}}
 				usePointerDownOutside
 				closeOnOutsideClick={false}

package/package/components/flows/scheduleUtils.js

@@ -135,7 +135,7 @@ export async function saveScheduleFromCfg(scheduleCfg, edit, workspace) {
         on_success: scheduleCfg.on_success,
         on_success_extra_args: scheduleCfg.on_success_extra_args,
         ws_error_handler_muted: scheduleCfg.ws_error_handler_muted,
-        retry: scheduleCfg.retry,
+        retry: !scheduleCfg.is_flow ? scheduleCfg.retry : undefined,
         summary: scheduleCfg.summary,
         description: scheduleCfg.description,
         no_flow_overlap: scheduleCfg.no_flow_overlap,

package/package/components/flows/types.d.ts

@@ -70,11 +70,12 @@ export type FlowEditorContext = {
 };
 export type FlowGraphAssetContext = StateStore<{
     selectedAsset: Asset | undefined;
-    assetsMap: Record<string, AssetWithAccessType[]>;
     s3FilePicker: S3FilePicker | undefined;
     dbManagerDrawer: DbManagerDrawer | undefined;
     resourceEditorDrawer: ResourceEditorDrawer | undefined;
     resourceMetadataCache: Record<string, {
         resource_type?: string;
     } | undefined>;
+    additionalAssetsMap: Record<string, AssetWithAccessType[]>;
+    computeAssetsCount: (asset: Asset) => number;
 }>;

package/package/components/graph/FlowGraphV2.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { AssetService, FlowService, ResourceService } from '../../gen';
+<script lang="ts">import { FlowService } from '../../gen';
 import { NODE } from '.';
 import { getContext, onDestroy, setContext, tick, untrack } from 'svelte';
 import { get, writable } from 'svelte/store';
@@ -32,20 +32,13 @@ import SubflowBound from './renderers/nodes/SubflowBound.svelte';
 import { deepEqual } from 'fast-equals';
 import ViewportResizer from './ViewportResizer.svelte';
 import AssetNode, { computeAssetNodes } from './renderers/nodes/AssetNode.svelte';
-import { getAllModules } from '../flows/flowExplorer';
-import { inferAssets } from '../../infer';
-import OnChange from '../common/OnChange.svelte';
-import S3FilePicker from '../S3FilePicker.svelte';
-import DbManagerDrawer from '../DBManagerDrawer.svelte';
-import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
-import { assetEq } from '../assets/lib';
 import AssetsOverflowedNode from './renderers/nodes/AssetsOverflowedNode.svelte';
 let useDataflow = writable(false);
 const triggerContext = getContext('TriggerContext');
 let fullWidth = 0;
 let width = $state(0);
 let simplifiableFlow = $state(undefined);
-let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, selectedId = writable(undefined), path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moving = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), inputAssets, onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = writable({}), flowHasChanged = false } = $props();
+let { onInsert = undefined, onDelete = undefined, onMove = undefined, onDeleteBranch = undefined, onNewBranch = undefined, onSelect = undefined, onChangeId = undefined, onUpdateMock = undefined, onSelectedIteration = undefined, success = undefined, modules = [], failureModule = undefined, preprocessorModule = undefined, minHeight = 0, maxHeight = undefined, notSelectable = false, flowModuleStates = undefined, selectedId = writable(undefined), path = undefined, newFlow = false, insertable = false, earlyStop = false, cache = false, scroll = false, moving = undefined, download = false, fullSize = false, disableAi = false, triggerNode = false, workspace = $workspaceStore ?? 'NO_WORKSPACE', editMode = false, allowSimplifiedPoll = true, expandedSubflows = $bindable({}), onTestUpTo = undefined, onEditInput = undefined, isOwner = false, onTestFlow = undefined, isRunning = false, onCancelTestFlow = undefined, onOpenPreview = undefined, onHideJobStatus = undefined, individualStepTests = false, flowJob = undefined, showJobStatus = false, suspendStatus = writable({}), flowHasChanged = false } = $props();
 setContext('FlowGraphContext', { selectedId, useDataflow });
 if (triggerContext && allowSimplifiedPoll) {
     if (isSimplifiable(modules)) {
@@ -55,66 +48,6 @@ if (triggerContext && allowSimplifiedPoll) {
         computeSimplifiableFlow(modules ?? [], value ?? false);
     });
 }
-const flowGraphAssetsCtx = $state({
-    val: {
-        assetsMap: inputAssets ? { Input: inputAssets } : {},
-        selectedAsset: undefined,
-        dbManagerDrawer: undefined,
-        s3FilePicker: undefined,
-        resourceEditorDrawer: undefined,
-        resourceMetadataCache: {}
-    }
-});
-setContext('FlowGraphAssetContext', flowGraphAssetsCtx);
-const assetsMap = $derived(flowGraphAssetsCtx.val.assetsMap);
-$effect(() => {
-    if (inputAssets)
-        flowGraphAssetsCtx.val.assetsMap.Input = inputAssets;
-});
-// Fetch resource metadata for the ExploreAssetButton
-const resMetadataCache = $derived(flowGraphAssetsCtx.val.resourceMetadataCache);
-$effect(() => {
-    for (const asset of Object.values(assetsMap ?? []).flatMap((x) => x)) {
-        if (asset.kind !== 'resource' || asset.path in resMetadataCache)
-            continue;
-        resMetadataCache[asset.path] = undefined; // avoid fetching multiple times because of async
-        ResourceService.getResource({ path: asset.path, workspace: $workspaceStore }).then((r) => (resMetadataCache[asset.path] = { resource_type: r.resource_type }));
-    }
-});
-// Fetch transitive assets (path scripts and flows)
-$effect(() => {
-    if (!$workspaceStore)
-        return;
-    let usages = [];
-    let modIds = [];
-    for (const mod of getAllModules(modules)) {
-        if (mod.id in assetsMap)
-            continue;
-        assetsMap[mod.id] = []; // avoid fetching multiple times because of async
-        if (mod.value.type === 'flow' || mod.value.type === 'script') {
-            usages.push({ path: mod.value.path, kind: mod.value.type });
-            modIds.push(mod.id);
-        }
-    }
-    if (usages.length) {
-        AssetService.listAssetsByUsage({
-            workspace: $workspaceStore,
-            requestBody: { usages }
-        }).then((result) => {
-            result.forEach((assets, idx) => {
-                assetsMap[modIds[idx]] = assets;
-            });
-        });
-    }
-});
-// Prune assetsMap to only contain assets that are actually used
-$effect(() => {
-    const allModules = new Set(getAllModules(modules).map((mod) => mod.id));
-    for (const modId in assetsMap) {
-        if (modId !== 'Input' && !allModules.has(modId))
-            delete assetsMap[modId];
-    }
-});
 function computeSimplifiableFlow(modules, simplifiedFlow) {
     const isSimplif = isSimplifiable(modules);
     simplifiableFlow = isSimplif ? { simplifiedFlow } : undefined;
@@ -289,11 +222,7 @@ async function updateStores() {
     }
     let newGraph = graph;
     newGraph.nodes.sort((a, b) => b.id.localeCompare(a.id));
-    [nodes, edges] = computeAssetNodes(layoutNodes(newGraph.nodes), newGraph.edges, assetsMap, {
-        moving,
-        eventHandlers: eventHandler,
-        disableAi
-    });
+    [nodes, edges] = computeAssetNodes(layoutNodes(newGraph.nodes), newGraph.edges);
     await tick();
     height = Math.max(...nodes.map((n) => n.position.y + NODE.height + 100), minHeight);
 }
@@ -326,11 +255,13 @@ const proOptions = { hideAttribution: true };
 // 	centerViewport(width)
 // })
 let yamlEditorDrawer = $state(undefined);
+const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
 $effect(() => {
     allowSimplifiedPoll && modules && untrack(() => onModulesChange(modules ?? []));
 });
 $effect(() => {
-    modules && untrack(() => onModulesChange2(modules));
+    readFieldsRecursively(modules);
+    untrack(() => onModulesChange2(modules));
 });
 let graph = $derived.by(() => {
     moduleCounter;
@@ -350,13 +281,13 @@ let graph = $derived.by(() => {
         flowJob,
         showJobStatus,
         suspendStatus,
-        flowHasChanged
+        flowHasChanged,
+        additionalAssetsMap: flowGraphAssetsCtx?.val.additionalAssetsMap
     }, failureModule, preprocessorModule, eventHandler, success, $useDataflow, $selectedId, moving, simplifiableFlow, triggerNode ? path : undefined, expandedSubflows);
 });
 $effect(() => {
     ;
     [graph, allowSimplifiedPoll];
-    readFieldsRecursively(assetsMap);
     untrack(() => updateStores());
 });
 let showDataflow = $derived($selectedId != undefined &&
@@ -481,33 +412,6 @@ export function isNodeVisible(nodeId) {
 	{/if}
 </div>
 
-{#each getAllModules(modules) as mod (mod.id)}
-	{#if mod.value.type === 'rawscript'}
-		{@const v = mod.value}
-		<OnChange
-			key={[v.content, v.asset_fallback_access_types]}
-			runFirstEffect
-			onChange={() =>
-				inferAssets(v.language, v.content)
-					.then((assets) => {
-						for (const override of v.asset_fallback_access_types ?? []) {
-							assets = assets.map((asset) => {
-								if (assetEq(asset, override) && !asset.access_type)
-									return { ...asset, access_type: override.access_type }
-								return asset
-							})
-						}
-						if (assetsMap && !deepEqual(assetsMap[mod.id], assets)) assetsMap[mod.id] = assets
-					})
-					.catch((e) => {})}
-		/>
-	{/if}
-{/each}
-
-<S3FilePicker bind:this={flowGraphAssetsCtx.val.s3FilePicker} readOnlyMode />
-<DbManagerDrawer bind:this={flowGraphAssetsCtx.val.dbManagerDrawer} />
-<ResourceEditorDrawer bind:this={flowGraphAssetsCtx.val.resourceEditorDrawer} />
-
 <style>
 	:global(.svelte-flow__handle) {
 		opacity: 0;

package/package/components/graph/FlowGraphV2.svelte.d.ts

@@ -3,7 +3,6 @@ import { type GraphModuleState } from '.';
 import { type Writable } from 'svelte/store';
 import '@xyflow/svelte/dist/base.css';
 import { type InlineScript, type InsertKind, type onSelectedIteration } from './graphBuilder.svelte';
-import { type AssetWithAccessType } from '../assets/lib';
 interface Props {
     success?: boolean | undefined;
     modules?: FlowModule[] | undefined;
@@ -29,7 +28,6 @@ interface Props {
     editMode?: boolean;
     allowSimplifiedPoll?: boolean;
     expandedSubflows?: Record<string, FlowModule[]>;
-    inputAssets?: AssetWithAccessType[];
     isOwner?: boolean;
     isRunning?: boolean;
     individualStepTests?: boolean;

package/package/components/graph/graphBuilder.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { FlowModule, Job, RawScript, Script } from '../../gen';
 import { type Edge } from '@xyflow/svelte';
 import type { GraphModuleState } from './model';
-import type { AssetWithAccessType } from '../assets/lib';
+import { type AssetWithAltAccessType } from '../assets/lib';
 import type { Writable } from 'svelte/store';
 export type InsertKind = 'script' | 'forloop' | 'whileloop' | 'branchone' | 'branchall' | 'flow' | 'trigger' | 'approval' | 'end';
 export type InlineScript = {
@@ -88,6 +88,7 @@ export type InputN = {
         flowJob: Job | undefined;
         showJobStatus: boolean;
         flowHasChanged: boolean;
+        assets?: AssetWithAltAccessType[] | undefined;
     };
 };
 export type ModuleN = {
@@ -104,6 +105,7 @@ export type ModuleN = {
         editMode: boolean;
         flowJob: Job | undefined;
         isOwner: boolean;
+        assets: AssetWithAltAccessType[] | undefined;
     };
 };
 export type BranchAllStartN = {
@@ -236,13 +238,13 @@ export type TriggerN = {
 export type AssetN = {
     type: 'asset';
     data: {
-        asset: AssetWithAccessType;
+        asset: AssetWithAltAccessType;
     };
 };
 export type AssetsOverflowedN = {
     type: 'assetsOverflowed';
     data: {
-        overflowedAssets: AssetWithAccessType[];
+        overflowedAssets: AssetWithAltAccessType[];
     };
 };
 export declare function graphBuilder(modules: FlowModule[] | undefined, extra: {
@@ -265,6 +267,7 @@ export declare function graphBuilder(modules: FlowModule[] | undefined, extra: {
         nb: number;
     }>>;
     flowHasChanged: boolean;
+    additionalAssetsMap?: Record<string, AssetWithAltAccessType[]>;
 }, failureModule: FlowModule | undefined, preprocessorModule: FlowModule | undefined, eventHandlers: GraphEventHandlers, success: boolean | undefined, useDataflow: boolean | undefined, selectedId: string | undefined, moving: string | undefined, simplifiableFlow: SimplifiableFlow | undefined, flowPathForTriggerNode: string | undefined, expandedSubflows: Record<string, FlowModule[]>): {
     nodes: NodeLayout[];
     edges: Edge[];

package/package/components/graph/graphBuilder.svelte.js

@@ -1,7 +1,9 @@
 import {} from '@xyflow/svelte';
-import { getDependeeAndDependentComponents } from '../flows/flowExplorer';
+import { getAllModules, getDependeeAndDependentComponents } from '../flows/flowExplorer';
 import { dfsByModule } from '../flows/previousResults';
 import { defaultIfEmptyString } from '../../utils';
+import { getFlowModuleAssets } from '../assets/lib';
+import { assetDisplaysAsOutputInFlowGraph } from './renderers/nodes/AssetNode.svelte';
 export function isTriggerStep(module) {
     return (module?.value != undefined &&
         (module.value.type === 'script' || module.value.type === 'rawscript') &&
@@ -59,12 +61,17 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                     insertable: extra.insertable,
                     editMode: extra.editMode,
                     isOwner: extra.isOwner,
-                    flowJob: extra.flowJob
+                    flowJob: extra.flowJob,
+                    assets: getFlowModuleAssets(module, extra.additionalAssetsMap)
                 },
                 type: 'module'
             });
             return module.id;
         }
+        // TODO : Do better than this
+        const nodeIdsWithOutputAssets = new Set(getAllModules(modules)
+            .filter((m) => getFlowModuleAssets(m, extra.additionalAssetsMap)?.some(assetDisplaysAsOutputInFlowGraph))
+            .map((m) => m.id));
         const parents = {};
         //
         function detectCycle(nodeId, visited, currentPath) {
@@ -119,10 +126,12 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                     // If the index is -1, it means that the target module is not in the modules array, so we set it to the length of the array
                     index: index >= 0 ? index : (mods?.length ?? 0),
                     ...extra,
-                    insertable: extra.insertable && !options?.disableInsert && prefix == undefined
+                    insertable: extra.insertable && !options?.disableInsert && prefix == undefined,
+                    shouldOffsetInsertBtnDueToAssetNode: nodeIdsWithOutputAssets.has(sourceId)
                 }
             });
         }
+        const inputAssets = extra.additionalAssetsMap?.['Input'];
         const inputNode = {
             id: 'Input',
             type: 'input2',
@@ -139,7 +148,8 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                 individualStepTests: extra.individualStepTests,
                 flowJob: extra.flowJob,
                 showJobStatus: extra.showJobStatus,
-                flowHasChanged: extra.flowHasChanged
+                flowHasChanged: extra.flowHasChanged,
+                ...(inputAssets ? { assets: inputAssets } : {})
             }
         };
         let triggerNode = undefined;
@@ -361,19 +371,35 @@ export function graphBuilder(modules, extra, failureModule, preprocessorModule,
                             type: 'branchOneEnd'
                         };
                         nodes.push(endNode);
-                        // Add default branch
+                        // // Add default branch
+                        // const defaultBranch: NodeLayout = {
+                        // 	id: `${module.id}-default`,
+                        // 	data: {
+                        // 		offset: currentOffset,
+                        // 		label: 'Default',
+                        // 		id: module.id,
+                        // 		branchIndex: -1,
+                        // 		eventHandlers: eventHandlers,
+                        // 		branchOne: true,
+                        // 		...extra
+                        // 	},
+                        // 	type: 'noBranch'
+                        // }
                         const defaultBranch = {
-                            id: `${module.id}-default`,
+                            id: `${module.id}-branch-default`,
                             data: {
                                 offset: currentOffset,
                                 label: 'Default',
                                 id: module.id,
                                 branchIndex: -1,
                                 eventHandlers: eventHandlers,
-                                branchOne: true,
-                                ...extra
+                                insertable: extra.insertable,
+                                preLabel: undefined,
+                                flowModuleStates: extra.flowModuleStates,
+                                selected: false,
+                                modules: module.value.default
                             },
-                            type: 'noBranch'
+                            type: 'branchOneStart'
                         };
                         nodes.push(defaultBranch);
                         addEdge(module.id, defaultBranch.id, { rootId: module.id, branch: 0 }, prefix, {

package/package/components/graph/renderers/edges/BaseEdge.svelte

@@ -4,18 +4,15 @@ import { ClipboardCopy, Hourglass } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { getStraightLinePath } from '../utils';
 import { twMerge } from 'tailwind-merge';
-import {} from '../../../flows/types';
-import { assetDisplaysAsOutputInFlowGraph, NODE_WITH_WRITE_ASSET_Y_OFFSET } from '../nodes/AssetNode.svelte';
+import { NODE_WITH_WRITE_ASSET_Y_OFFSET } from '../nodes/AssetNode.svelte';
 import { workspaceStore } from '../../../../stores';
 import FlowStatusWaitingForEvents from '../../../FlowStatusWaitingForEvents.svelte';
 const { useDataflow } = getContext('FlowGraphContext');
-const flowGraphAssetCtx = getContext('FlowGraphAssetContext');
 let { 
 // id,
 sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, markerEnd, 
 // style,
 data } = $props();
-const shouldOffsetInsertButtonDueToAssetNode = flowGraphAssetCtx?.val.assetsMap?.[data.sourceId]?.some(assetDisplaysAsOutputInFlowGraph);
 let [edgePath] = $derived(getBezierPath({
     sourceX,
     sourceY: targetY - sourceY > 100 ? targetY - 100 : sourceY,
@@ -37,7 +34,7 @@ const suspendStatus = $derived(data?.suspendStatus);
 
 <EdgeLabel
 	x={sourceX}
-	y={sourceY + 28 + (shouldOffsetInsertButtonDueToAssetNode ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)}
+	y={sourceY + 28 + (data.shouldOffsetInsertBtnDueToAssetNode ? NODE_WITH_WRITE_ASSET_Y_OFFSET : 0)}
 	class="base-edge"
 	style=""
 >

package/package/components/graph/renderers/edges/BaseEdge.svelte.d.ts

@@ -22,6 +22,7 @@ type $$ComponentProps = EdgeProps & {
             job: Job;
             nb: number;
         }>>;
+        shouldOffsetInsertBtnDueToAssetNode?: boolean;
     };
 };
 declare const BaseEdge: import("svelte").Component<$$ComponentProps, {}, "">;

package/package/components/graph/renderers/nodes/AssetNode.svelte

@@ -2,19 +2,21 @@
 export const NODE_WITH_WRITE_ASSET_Y_OFFSET = 45;
 export const READ_ASSET_Y_OFFSET = -45;
 export const WRITE_ASSET_Y_OFFSET = 64;
-export const assetDisplaysAsInputInFlowGraph = (a) => !a.access_type || a.access_type === 'r' || a.access_type === 'rw';
-export const assetDisplaysAsOutputInFlowGraph = (a) => a.access_type === 'w' || a.access_type === 'rw';
+export const assetDisplaysAsInputInFlowGraph = (a) => !getAccessType(a) || getAccessType(a) === 'r' || getAccessType(a) === 'rw';
+export const assetDisplaysAsOutputInFlowGraph = (a) => getAccessType(a) === 'w' || getAccessType(a) === 'rw';
 let computeAssetNodesCache;
-export function computeAssetNodes(nodes, edges, assetsMap, extraData) {
-    if (nodes === computeAssetNodesCache?.[0] && deepEqual(assetsMap, computeAssetNodesCache?.[1]))
-        return computeAssetNodesCache[2];
+export function computeAssetNodes(nodes, edges) {
+    if (nodes === computeAssetNodesCache?.[0])
+        return computeAssetNodesCache[1];
     const MAX_ASSET_ROW_WIDTH = 300;
     const ASSETS_OVERFLOWED_NODE_WIDTH = 25;
     const allAssetNodes = [];
     const allAssetEdges = [];
     const yPosMap = {};
     for (const node of nodes) {
-        const assets = assetsMap?.[node.id] ?? [];
+        if (node.type !== 'module' && node.type !== 'input2')
+            continue;
+        const assets = node.data.assets ?? [];
         // Each asset can be displayed at the top and bottom
         // i.e once (R or W) or twice (RW)
         const inputAssets = assets.filter(assetDisplaysAsInputInFlowGraph);
@@ -167,30 +169,26 @@ export function computeAssetNodes(nodes, edges, assetsMap, extraData) {
         [...sortedNewNodes, ...allAssetNodes],
         [...edges, ...allAssetEdges]
     ];
-    computeAssetNodesCache = [nodes, clone(assetsMap), ret];
+    computeAssetNodesCache = [nodes, ret];
     return ret;
 }
 </script>
 
 <script lang="ts">import NodeWrapper from './NodeWrapper.svelte';
 import { AlertTriangle } from 'lucide-svelte';
-import { assetEq, formatAssetKind } from '../../../assets/lib';
+import { assetEq, formatAssetKind, getAccessType } from '../../../assets/lib';
 import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
 import ExploreAssetButton, { assetCanBeExplored } from '../../../ExploreAssetButton.svelte';
 import { Tooltip } from '../../../meltComponents';
 import { clone, pluralize } from '../../../../utils';
 import AssetGenericIcon from '../../../icons/AssetGenericIcon.svelte';
-import { deepEqual } from 'fast-equals';
 import { NODE } from '../../util';
 import { userStore } from '../../../../stores';
 const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
-const usageCount = $derived(Object.values(flowGraphAssetsCtx.val.assetsMap ?? {})
-    .flat()
-    .filter((asset) => assetEq(asset, data.asset)).length);
 let { data } = $props();
-const isSelected = $derived(assetEq(flowGraphAssetsCtx.val.selectedAsset, data.asset));
-const cachedResourceMetadata = $derived(flowGraphAssetsCtx.val.resourceMetadataCache[data.asset.path]);
+const isSelected = $derived(assetEq(flowGraphAssetsCtx?.val.selectedAsset, data.asset));
+const cachedResourceMetadata = $derived(flowGraphAssetsCtx?.val.resourceMetadataCache[data.asset.path]);
 </script>
 
 <NodeWrapper>
@@ -202,8 +200,10 @@ const cachedResourceMetadata = $derived(flowGraphAssetsCtx.val.resourceMetadataC
 					'bg-surface h-6 flex items-center gap-1.5 rounded-sm text-tertiary border overflow-clip',
 					isSelected ? 'bg-surface-secondary !border-surface-inverse' : 'border-transparent'
 				)}
-				onmouseenter={() => (flowGraphAssetsCtx.val.selectedAsset = data.asset)}
-				onmouseleave={() => (flowGraphAssetsCtx.val.selectedAsset = undefined)}
+				onmouseenter={() =>
+					flowGraphAssetsCtx && (flowGraphAssetsCtx.val.selectedAsset = data.asset)}
+				onmouseleave={() =>
+					flowGraphAssetsCtx && (flowGraphAssetsCtx.val.selectedAsset = undefined)}
 			>
 				<AssetGenericIcon
 					assetKind={data.asset.kind}
@@ -225,14 +225,17 @@ const cachedResourceMetadata = $derived(flowGraphAssetsCtx.val.resourceMetadataC
 						asset={data.asset}
 						noText
 						buttonVariant="contained"
-						s3FilePicker={flowGraphAssetsCtx.val.s3FilePicker}
-						dbManagerDrawer={flowGraphAssetsCtx.val.dbManagerDrawer}
+						s3FilePicker={flowGraphAssetsCtx?.val.s3FilePicker}
+						dbManagerDrawer={flowGraphAssetsCtx?.val.dbManagerDrawer}
 						_resourceMetadata={cachedResourceMetadata}
 					/>
 				{/if}
 			</div>
 			<svelte:fragment slot="text">
-				Used in {pluralize(usageCount, 'step')}<br />
+				Used in {pluralize(
+					flowGraphAssetsCtx?.val.computeAssetsCount?.(data.asset) ?? -1,
+					'step'
+				)}<br />
 				<a
 					href={undefined}
 					class={twMerge(
@@ -243,7 +246,7 @@ const cachedResourceMetadata = $derived(flowGraphAssetsCtx.val.resourceMetadataC
 					)}
 					onclick={() => {
 						if (data.asset.kind === 'resource')
-							flowGraphAssetsCtx.val.resourceEditorDrawer?.initEdit(data.asset.path)
+							flowGraphAssetsCtx?.val.resourceEditorDrawer?.initEdit(data.asset.path)
 					}}
 				>
 					{data.asset.path}

package/package/components/graph/renderers/nodes/AssetNode.svelte.d.ts

@@ -2,17 +2,12 @@ export declare const NODE_WITH_READ_ASSET_Y_OFFSET = 45;
 export declare const NODE_WITH_WRITE_ASSET_Y_OFFSET = 45;
 export declare const READ_ASSET_Y_OFFSET = -45;
 export declare const WRITE_ASSET_Y_OFFSET = 64;
-export declare const assetDisplaysAsInputInFlowGraph: (a: {
-    access_type?: AssetUsageAccessType;
-}) => boolean;
-export declare const assetDisplaysAsOutputInFlowGraph: (a: {
-    access_type?: AssetUsageAccessType;
-}) => boolean;
-export declare function computeAssetNodes(nodes: Node[], edges: Edge[], assetsMap: Record<string, AssetWithAccessType[]>, extraData: any): [Node[], Edge[]];
-import type { AssetN } from '../../graphBuilder.svelte';
-import { type AssetWithAccessType } from '../../../assets/lib';
+export declare const assetDisplaysAsInputInFlowGraph: (a: AssetWithAltAccessType) => boolean;
+export declare const assetDisplaysAsOutputInFlowGraph: (a: AssetWithAltAccessType) => boolean;
+export declare function computeAssetNodes(nodes: (Node & NodeLayout)[], edges: Edge[]): [(Node & NodeLayout)[], Edge[]];
+import type { AssetN, NodeLayout } from '../../graphBuilder.svelte';
+import { type AssetWithAltAccessType } from '../../../assets/lib';
 import type { Edge, Node } from '@xyflow/svelte';
-import type { AssetUsageAccessType } from '../../../../gen';
 interface Props {
     data: AssetN['data'];
 }

package/package/components/graph/renderers/nodes/AssetsOverflowedNode.svelte

@@ -10,7 +10,7 @@ import { assetEq } from '../../../assets/lib';
 let { data } = $props();
 const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
 let isOpen = $state(false);
-let includesSelected = $derived(data.overflowedAssets.some((asset) => assetEq(flowGraphAssetsCtx.val.selectedAsset, asset)));
+let includesSelected = $derived(data.overflowedAssets.some((asset) => assetEq(flowGraphAssetsCtx?.val.selectedAsset, asset)));
 let wasOpenedBecauseOfExternalSelected = false;
 $effect(() => {
     if (includesSelected && !isOpen) {

package/package/components/graph/util.js

@@ -2,7 +2,7 @@ export const NODE = {
     width: 275,
     height: 34,
     gap: {
-        horizontal: 40,
+        horizontal: 50,
         vertical: 50
     }
 };

package/package/components/home/ItemsList.svelte

@@ -158,6 +158,8 @@ let collapseAll = $state(true);
 let owners = $derived(Array.from(new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])).sort());
 $effect(() => {
     if ($userStore && $workspaceStore) {
+        ;
+        [archived, includeWithoutMain];
         untrack(() => {
             loadScripts(includeWithoutMain);
             loadFlows();

package/package/components/icons/AssetGenericIcon.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">import { Pyramid } from 'lucide-svelte';
 import AssetResIcon from './AssetResIcon.svelte';
 import AssetS3Icon from './AssetS3Icon.svelte';
-import AssetVarIcon from './AssetVarIcon.svelte';
 let { assetKind, fill, size, class: className = '' } = $props();
 </script>
 
@@ -9,8 +8,6 @@ let { assetKind, fill, size, class: className = '' } = $props();
 	<AssetS3Icon {fill} width={size} height={size} class={className} />
 {:else if assetKind == 'resource'}
 	<AssetResIcon {fill} width={size} height={size} class={className} />
-{:else if assetKind == 'variable'}
-	<AssetVarIcon {fill} width={size} height={size} class={className} />
 {:else}
 	<Pyramid {size} color={fill} class={'!fill-none ' + className} />
 {/if}