windmill-components 1.109.8 → 1.121.0

package/package/components/flows/previousResults.js

@@ -1,25 +1,5 @@
 import { schemaToObject } from '../../schema';
-function getSubModules(flowModule) {
-    if (flowModule.value.type === 'forloopflow') {
-        return [flowModule.value.modules];
-    }
-    else if (flowModule.value.type === 'branchall') {
-        return flowModule.value.branches.map((branch) => branch.modules);
-    }
-    else if (flowModule.value.type == 'branchone') {
-        return [...flowModule.value.branches.map((branch) => branch.modules), flowModule.value.default];
-    }
-    return [];
-}
-function getAllSubmodules(flowModule) {
-    return getSubModules(flowModule).map((modules) => {
-        return modules
-            .map((module) => {
-            return [module, ...getAllSubmodules(module).flat()];
-        })
-            .flat();
-    });
-}
+import { getAllSubmodules, getSubModules } from './flowExplorer';
 function dfs(id, flow, getParents = true) {
     if (id === undefined) {
         return [];
@@ -72,52 +52,6 @@ function getFlowInput(parentModules, flowState, args, schema) {
         return schemaToObject(schema, args);
     }
 }
-export function getAllModules(flow) {
-    let modules = [
-        ...flow.value.modules,
-        ...flow.value.modules.map((x) => getAllSubmodules(x).flat()),
-        ...(flow.value.failure_module ? [flow.value.failure_module] : [])
-    ].flat();
-    return modules;
-}
-function getExpr(x) {
-    if (x == undefined)
-        return [];
-    return x.type === 'javascript' ? [x.expr] : [];
-}
-function exprsOfInputTransforms(x) {
-    return Object.values(x)
-        .map((x) => getExpr(x))
-        .flat();
-}
-export function getDependentComponents(id, flow) {
-    let modules = getAllModules(flow);
-    return Object.fromEntries(modules
-        .map((x) => {
-        let exprs = [];
-        if (x.value.type === 'forloopflow') {
-            exprs.push(...getExpr(x.value.iterator));
-        }
-        else if (x.value.type === 'branchone') {
-            x.value.branches.map((branch) => {
-                exprs.push(branch.expr);
-            });
-        }
-        else if (x.value.type === 'flow' ||
-            x.value.type === 'script' ||
-            x.value.type == 'rawscript') {
-            exprs.push(...exprsOfInputTransforms(x.value.input_transforms));
-            exprs.push(...getExpr(x.sleep));
-            if (x.stop_after_if?.expr) {
-                exprs.push(x.stop_after_if.expr);
-            }
-            exprs.push(...getExpr(x.sleep));
-        }
-        exprs = exprs.filter((x) => x.includes(`results.${id}`));
-        return [x.id, exprs];
-    })
-        .filter((x) => x[1].length > 0));
-}
 export function getStepPropPicker(flowState, parentModule, previousModule, id, flow, args, include_node) {
     const flowInput = getFlowInput(dfs(parentModule?.id, flow), flowState, args, flow.schema);
     const previousIds = dfs(id, flow, false)

package/package/components/graph/FlowGraph.svelte

@@ -7,6 +7,8 @@ import Svelvet from './svelvet/container/views/Svelvet.svelte';
 import MapItem from '../flows/map/MapItem.svelte';
 import VirtualItem from '../flows/map/VirtualItem.svelte';
 import { writable } from 'svelte/store';
+import { getDependeeAndDependentComponents } from '../flows/flowExplorer';
+import { deepEqual } from 'fast-equals';
 export let success = undefined;
 export let modules = [];
 export let failureModule = undefined;
@@ -29,16 +31,34 @@ let edges = [];
 let width, height;
 let fullWidth;
 let errorHandlers = {};
+$: showDataflow =
+    $selectedId != undefined &&
+        !$selectedId.startsWith('constants') &&
+        !$selectedId.startsWith('settings') &&
+        $selectedId !== 'failure' &&
+        $selectedId !== 'Result';
+let dataflow = false;
 let dispatch = createEventDispatcher();
 $: {
-    rebuildOnChange;
+    dataflow;
     moving;
     width && height && minHeight && $selectedId && flowModuleStates;
-    nodes = edges = [];
-    errorHandlers = {};
     createGraph();
 }
+$: rebuildOnChange && triggerRebuild();
+let oldRebuildOnChange = rebuildOnChange ? JSON.parse(JSON.stringify(rebuildOnChange)) : undefined;
+function triggerRebuild() {
+    if (!deepEqual(oldRebuildOnChange, rebuildOnChange)) {
+        oldRebuildOnChange = JSON.parse(JSON.stringify(rebuildOnChange));
+        createGraph();
+    }
+}
 async function createGraph() {
+    // console.log(JSON.stringify(modules))
+    // return
+    nodes = [];
+    edges = [];
+    errorHandlers = {};
     if (modules) {
         idGenerator = createIdGenerator();
     }
@@ -47,12 +67,12 @@ async function createGraph() {
         return;
     }
     nestedNodes = nodes = [];
-    nestedNodes.push(createVirtualNode(getParentIds(), 'Input', modules, 'after', undefined, undefined, 0, 0, true, undefined));
+    nestedNodes.push(createVirtualNode(getParentIds(), 'Input', modules, 'after', undefined, undefined, 0, 0, true, undefined, undefined, 'Input'));
     modules.forEach((m, i) => {
         const item = getConvertedFlowModule(m, undefined, undefined, 0, i + 1 == modules?.length, modules);
         item && nestedNodes.push(item);
     });
-    nestedNodes.push(createVirtualNode(getParentIds(), 'Result', undefined, 'before', undefined, undefined, 0, modules.length, true, undefined));
+    nestedNodes.push(createVirtualNode(getParentIds(), 'Result', undefined, 'before', undefined, undefined, 0, modules.length, true, undefined, undefined, undefined));
     if (!flowModuleStates) {
         if (failureModule)
             nestedNodes.push(createErrorHandler(failureModule));
@@ -70,7 +90,43 @@ async function createGraph() {
     let hfull = Math.max(layered.height, minHeight);
     fullWidth = layered.width;
     height = fullSize ? hfull : Math.min(hfull, maxHeight ?? window.innerHeight - 100);
-    edges = createEdges(nodes);
+    let useDataflow = dataflow && showDataflow;
+    edges = useDataflow ? [] : createEdges(nodes);
+    if (useDataflow && $selectedId) {
+        let deps = getDependeeAndDependentComponents($selectedId, modules ?? [], failureModule);
+        if (deps) {
+            Object.entries(deps.dependees).forEach((x, i) => {
+                let pid = x[0];
+                edges.push({
+                    id: `dep-${pid}-${$selectedId}`,
+                    source: pid,
+                    target: $selectedId,
+                    labelBgColor: 'white',
+                    arrow: false,
+                    animate: true,
+                    noHandle: true,
+                    label: pid,
+                    type: 'bezier',
+                    offset: i * 20
+                });
+            });
+            Object.entries(deps.dependents).forEach((x, i) => {
+                let pid = x[0];
+                edges.push({
+                    id: `dep-${pid}-${$selectedId}`,
+                    source: $selectedId,
+                    target: pid,
+                    labelBgColor: 'white',
+                    arrow: false,
+                    animate: true,
+                    noHandle: true,
+                    label: pid,
+                    type: 'bezier',
+                    offset: i * 10
+                });
+            });
+        }
+    }
 }
 function getConvertedFlowModule(module, parent, edgeLabel, loopDepth, insertableEnd, modules) {
     const type = module.value.type;
@@ -207,12 +263,12 @@ function flowModuleToLoop(modules, module, parent, loopDepth) {
         ]
     };
     const innerModules = module.value.modules;
-    loop.items.push(createVirtualNode(getParentIds(loop.items), `Do one iteration`, innerModules, 'after', undefined, 1000, loopDepth + 1, 0, true, undefined, undefined));
+    loop.items.push(createVirtualNode(getParentIds(loop.items), `Do one iteration`, innerModules, 'after', undefined, 1000, loopDepth + 1, 0, true, undefined, undefined, undefined));
     innerModules.forEach((module, i) => {
         const item = getConvertedFlowModule(module, loop.items, undefined, loopDepth + 1, i + 1 == innerModules?.length, innerModules);
         item && loop.items.push(item);
     });
-    loop.items.push(createVirtualNode(getParentIds(loop.items), `Collect result of each iteration`, modules, 'after', undefined, 1000, loopDepth, modules.findIndex((m) => m.id == module.id) + 1, true, undefined, module.id));
+    loop.items.push(createVirtualNode(getParentIds(loop.items), `Collect result of each iteration`, modules, 'after', undefined, 1000, loopDepth, modules.findIndex((m) => m.id == module.id) + 1, true, undefined, module.id, undefined));
     return loop;
 }
 function flowModuleToBranch(module, modules, branches, edgesLabel, parent = undefined, loopDepth, branchall) {
@@ -221,12 +277,12 @@ function flowModuleToBranch(module, modules, branches, edgesLabel, parent = unde
     const branchParent = [node.id];
     if (branches.length == 0) {
         bitems.push([
-            createVirtualNode(branchParent, 'No branches', undefined, 'after', undefined, 0, loopDepth, 0, false, undefined)
+            createVirtualNode(branchParent, 'No branches', undefined, 'after', undefined, 0, loopDepth, 0, false, undefined, undefined, undefined)
         ]);
     }
     branches.forEach(({ summary, modules, removable }, i) => {
         const items = [];
-        items.push(createVirtualNode(branchParent, summary, modules, 'after', edgesLabel[i], undefined, loopDepth, 0, false, removable ? { module, index: i } : undefined));
+        items.push(createVirtualNode(branchParent, summary, modules, 'after', edgesLabel[i], undefined, loopDepth, 0, false, removable ? { module, index: i } : undefined, undefined, undefined));
         if (modules.length) {
             modules.forEach((module, j) => {
                 const item = getConvertedFlowModule(module, items, undefined, loopDepth, j + 1 == modules?.length, modules);
@@ -238,7 +294,7 @@ function flowModuleToBranch(module, modules, branches, edgesLabel, parent = unde
     return {
         type: 'branch',
         node,
-        nodeEnd: createVirtualNode(bitems.map((i) => getParentIds(i)).flat(), branchall ? 'Collect result of each branch' : 'Result of the chosen branch', modules, 'after', undefined, 0, loopDepth, modules.findIndex((m) => m.id == module.id) + 1, true, undefined, module.id),
+        nodeEnd: createVirtualNode(bitems.map((i) => getParentIds(i)).flat(), branchall ? 'Collect result of each branch' : 'Result of the chosen branch', modules, 'after', undefined, 0, loopDepth, modules.findIndex((m) => m.id == module.id) + 1, true, undefined, module.id, undefined),
         items: bitems
     };
 }
@@ -347,8 +403,8 @@ function createEdges(nodes) {
     });
     return edges;
 }
-function createVirtualNode(parentIds, label, modules, whereInsert, edgeLabel, offset, loopDepth, index, selectable, deleteBranch, mid = undefined) {
-    const id = -idGenerator.next().value - 2 + (offset ?? 0);
+function createVirtualNode(parentIds, label, modules, whereInsert, edgeLabel, offset, loopDepth, index, selectable, deleteBranch, mid, fixed_id) {
+    const id = fixed_id ?? -idGenerator.next().value - 2 + (offset ?? 0);
     return {
         type: 'node',
         id: id.toString(),
@@ -448,11 +504,13 @@ function createErrorHandler(mod, parent_module) {
 			{download}
 			highlightEdges={false}
 			locked
+			bind:dataflow
 			{nodes}
 			width={fullSize ? fullWidth : width}
 			{edges}
 			{height}
 			{scroll}
+			nodeSelected={showDataflow}
 			background={false}
 			bgColor="rgb(249 250 251)"
 		/>

package/package/components/graph/svelvet/container/views/GraphView.svelte

@@ -9,13 +9,16 @@ import { determineD3Instance } from '../..//d3/controllers/d3';
 import { findStore } from '../../store/controllers/storeApi';
 import { onDestroy } from 'svelte';
 import { Expand, Minus, Plus } from 'lucide-svelte';
+import Toggle from '../../../../Toggle.svelte';
 //these are typscripted as any, however they have been transformed inside of store.ts
 export let canvasId;
 export let width;
 export let height;
 export let boundary = false;
 export let scroll = false;
+export let dataflow = false;
 export let download = false;
+export let showDataflowToggle = false;
 // here we lookup the store using the unique key
 const store = findStore(canvasId);
 const { edgesStore, nodesStore, nodeSelected, backgroundStore, movementStore, widthStore, heightStore, d3Scale } = store;
@@ -161,6 +164,19 @@ function handleZoom(e) {
 		</g>
 	</svg>
 </div>
+{#if showDataflowToggle}
+	<div id="dataflow_toggle">
+		<Toggle
+			textClass="!text-gray-600"
+			size="xs"
+			bind:checked={dataflow}
+			options={{
+				right: 'dataflow'
+			}}
+		/>
+	</div>
+{/if}
+
 <div id="buttons">
 	<button title="Zoom In" id="zoom_in">
 		<Plus size="14" class="flex justify-start m-1" />
@@ -168,6 +184,7 @@ function handleZoom(e) {
 	<button title="Zoom Out" id="zoom_out">
 		<Minus size="14" class="flex justify-start m-1" />
 	</button>
+
 	{#if download}
 		<button on:click={() => dispatch('expand')}>
 			<Expand size="14" class="flex justify-start m-1" />
@@ -176,6 +193,11 @@ function handleZoom(e) {
 </div>
 
 <style>
+	#dataflow_toggle {
+		position: absolute;
+		top: 3px;
+		left: 8px;
+	}
 	#buttons {
 		position: absolute;
 		top: 8px;

package/package/components/graph/svelvet/container/views/GraphView.svelte.d.ts

@@ -6,7 +6,9 @@ declare const __propDef: {
         height: number;
         boundary?: boolean | undefined;
         scroll?: boolean | undefined;
+        dataflow?: boolean | undefined;
         download?: boolean | undefined;
+        showDataflowToggle?: boolean | undefined;
     };
     events: {
         contextmenu: MouseEvent;

package/package/components/graph/svelvet/container/views/Svelvet.svelte

@@ -23,6 +23,8 @@ export let editable = false;
 export let highlightEdges = true;
 export let scroll = false;
 export let download = false;
+export let dataflow = false;
+export let nodeSelected = false;
 const fullHeight = settings?.fullHeight ?? false;
 // generates a unique string for each svelvet component's unique store instance
 // creates a store that uses the unique sting as the key to create and look up the corresponding store
@@ -108,7 +110,17 @@ afterUpdate(() => {
 	{#if error != ''}
 		<div class="error text-red-600 center-center p-4">{error}</div>
 	{:else}
-		<GraphView on:expand {download} {scroll} {canvasId} {width} {height} {boundary} />
+		<GraphView
+			showDataflowToggle={nodeSelected}
+			bind:dataflow
+			on:expand
+			{download}
+			{scroll}
+			{canvasId}
+			{width}
+			{height}
+			{boundary}
+		/>
 	{/if}
 </div>
 

package/package/components/graph/svelvet/container/views/Svelvet.svelte.d.ts

@@ -20,6 +20,8 @@ declare const __propDef: {
         highlightEdges?: boolean | undefined;
         scroll?: boolean | undefined;
         download?: boolean | undefined;
+        dataflow?: boolean | undefined;
+        nodeSelected?: boolean | undefined;
     };
     events: {
         expand: CustomEvent<any>;

package/package/components/graph/svelvet/edges/models/Edge.d.ts

@@ -34,7 +34,8 @@ export declare class Edge implements EdgeType {
     arrow: boolean;
     clickCallback: Function;
     className: string;
-    constructor(id: string, sourceX: number, sourceY: number, targetX: number, targetY: number, canvasId: string, label: string, type: 'straight' | 'smoothstep' | 'step' | 'bezier', labelBgColor: string, labelTextColor: string, edgeColor: string, animate: boolean, noHandle: boolean, arrow: boolean, clickCallback: Function, className: string);
+    offset?: number | undefined;
+    constructor(id: string, sourceX: number, sourceY: number, targetX: number, targetY: number, canvasId: string, label: string, type: 'straight' | 'smoothstep' | 'step' | 'bezier', labelBgColor: string, labelTextColor: string, edgeColor: string, animate: boolean, noHandle: boolean, arrow: boolean, clickCallback: Function, className: string, offset?: number | undefined);
     /**
      * delete is going to delete the Edge and also delete associated Anchors
      */

package/package/components/graph/svelvet/edges/models/Edge.js

@@ -35,7 +35,8 @@ export class Edge {
     arrow;
     clickCallback;
     className;
-    constructor(id, sourceX, sourceY, targetX, targetY, canvasId, label, type, labelBgColor, labelTextColor, edgeColor, animate, noHandle, arrow, clickCallback, className) {
+    offset;
+    constructor(id, sourceX, sourceY, targetX, targetY, canvasId, label, type, labelBgColor, labelTextColor, edgeColor, animate, noHandle, arrow, clickCallback, className, offset) {
         this.id = id;
         this.sourceX = sourceX;
         this.sourceY = sourceY;
@@ -52,6 +53,7 @@ export class Edge {
         this.arrow = arrow;
         this.clickCallback = clickCallback;
         this.className = className;
+        this.offset = offset;
     }
     /**
      * delete is going to delete the Edge and also delete associated Anchors

package/package/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte

@@ -1,15 +1,4 @@
 <script>import BaseEdge from './BaseEdge.svelte';
-// import { Position } from '../types/utils';
-// // enumerable values (static) set for Position
-// export var Position;
-// (function (Position) {
-//     Position["Left"] = "left";
-//     Position["Right"] = "right";
-//     Position["Top"] = "top";
-//     Position["Bottom"] = "bottom";
-// })(Position || (Position = {}));
-// //
-// // export type CoordinateExtent = [[number, number], [number, number]];
 const Position = { Left: 'left', Right: 'right', Top: 'top', Bottom: 'bottom' };
 import { findStore } from '../../../store/controllers/storeApi';
 import { getAnchorFromEdge } from '../../../edges/controllers/util';
@@ -112,10 +101,10 @@ $: {
     const targetAnchor = getAnchorFromEdge(store, edge.id, 'target');
     const mapAngle = { 0: 'right', 90: 'top', 180: 'left', 270: 'bottom' };
     params = {
-        sourceX: edge.sourceX,
+        sourceX: edge.sourceX + (edge.offset ?? 0),
         sourceY: edge.sourceY,
         sourcePosition: mapAngle[sourceAnchor.angle],
-        targetX: edge.targetX,
+        targetX: edge.targetX + (edge.offset ?? 0),
         targetY: edge.targetY,
         targetPosition: mapAngle[targetAnchor.angle],
         curvature: 0.25

package/package/components/graph/svelvet/store/controllers/util.js

@@ -73,7 +73,7 @@ export function populateEdgesStore(store, edges, canvasId) {
             sourceAnchor = anchors[1];
             targetAnchor = anchors[0];
         }
-        edgesStore[edgeId] = new Edge(edgeId, sourceAnchor.positionX, sourceAnchor.positionY, targetAnchor.positionX, targetAnchor.positionY, canvasId, userEdge.label === undefined ? '' : userEdge.label, userEdge.type === undefined ? 'bezier' : userEdge.type, userEdge.labelBgColor === undefined ? 'white' : userEdge.labelBgColor, userEdge.labelTextColor === undefined ? 'black' : userEdge.labelTextColor, userEdge.edgeColor === undefined ? 'black' : userEdge.edgeColor, userEdge.animate === undefined ? false : userEdge.animate, userEdge.noHandle === undefined ? false : userEdge.noHandle, userEdge.arrow === undefined ? false : userEdge.arrow, userEdge.clickCallback === undefined ? () => { } : userEdge.clickCallback, userEdge.className === undefined ? '' : userEdge.className);
+        edgesStore[edgeId] = new Edge(edgeId, sourceAnchor.positionX, sourceAnchor.positionY, targetAnchor.positionX, targetAnchor.positionY, canvasId, userEdge.label === undefined ? '' : userEdge.label, userEdge.type === undefined ? 'bezier' : userEdge.type, userEdge.labelBgColor === undefined ? 'white' : userEdge.labelBgColor, userEdge.labelTextColor === undefined ? 'black' : userEdge.labelTextColor, userEdge.edgeColor === undefined ? 'black' : userEdge.edgeColor, userEdge.animate === undefined ? false : userEdge.animate, userEdge.noHandle === undefined ? false : userEdge.noHandle, userEdge.arrow === undefined ? false : userEdge.arrow, userEdge.clickCallback === undefined ? () => { } : userEdge.clickCallback, userEdge.className === undefined ? '' : userEdge.className, userEdge.offset);
     }
     store.edgesStore.set(edgesStore);
 }

package/package/components/graph/svelvet/types/types.d.ts

@@ -43,6 +43,7 @@ export interface UserEdgeType {
     arrow?: boolean;
     clickCallback?: Function;
     className?: string;
+    offset?: number;
 }
 export declare function getD3PositionX(canvasId: string): number;
 export declare function getD3PositionY(canvasId: string): number;

package/package/components/home/ItemsList.svelte

@@ -22,6 +22,7 @@ import RawAppRow from '../common/table/RawAppRow.svelte';
 import { canWrite } from '../../utils';
 import { page } from '$app/stores';
 import { setQuery } from '../../navigation';
+import DeployWorkspaceDrawer from '../DeployWorkspaceDrawer.svelte';
 let scripts;
 let flows;
 let apps;
@@ -30,6 +31,7 @@ let filteredItems = [];
 let itemKind = $page.url.searchParams.get('kind') ?? 'all';
 let shareModal;
 let moveDrawer;
+let deploymentDrawer;
 let loading = true;
 let nbDisplayed = 30;
 export let deleteConfirmedCallback = undefined;
@@ -194,6 +196,7 @@ let archived = false;
 	}}
 />
 
+<DeployWorkspaceDrawer bind:this={deploymentDrawer} />
 <MoveDrawer
 	bind:this={moveDrawer}
 	on:update={() => {
@@ -291,47 +294,53 @@ let archived = false;
 				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path)}
 					{#key item.summary}
 						{#key item.starred}
-							{#if item.type == 'script'}
-								<ScriptRow
-									bind:deleteConfirmedCallback
-									starred={item.starred ?? false}
-									marked={item.marked}
-									on:change={loadScripts}
-									script={item}
-									{shareModal}
-									{moveDrawer}
-								/>
-							{:else if item.type == 'flow'}
-								<FlowRow
-									bind:deleteConfirmedCallback
-									starred={item.starred ?? false}
-									marked={item.marked}
-									on:change={loadFlows}
-									flow={item}
-									{shareModal}
-									{moveDrawer}
-								/>
-							{:else if item.type == 'app'}
-								<AppRow
-									bind:deleteConfirmedCallback
-									starred={item.starred ?? false}
-									marked={item.marked}
-									on:change={loadApps}
-									app={item}
-									{moveDrawer}
-									{shareModal}
-								/>
-							{:else if item.type == 'raw_app'}
-								<RawAppRow
-									bind:deleteConfirmedCallback
-									starred={item.starred ?? false}
-									marked={item.marked}
-									on:change={loadRawApps}
-									app={item}
-									{moveDrawer}
-									{shareModal}
-								/>
-							{/if}
+							{#key item.has_draft}
+								{#if item.type == 'script'}
+									<ScriptRow
+										bind:deleteConfirmedCallback
+										starred={item.starred ?? false}
+										marked={item.marked}
+										on:change={loadScripts}
+										script={item}
+										{shareModal}
+										{moveDrawer}
+										{deploymentDrawer}
+									/>
+								{:else if item.type == 'flow'}
+									<FlowRow
+										bind:deleteConfirmedCallback
+										starred={item.starred ?? false}
+										marked={item.marked}
+										on:change={loadFlows}
+										flow={item}
+										{shareModal}
+										{moveDrawer}
+										{deploymentDrawer}
+									/>
+								{:else if item.type == 'app'}
+									<AppRow
+										bind:deleteConfirmedCallback
+										starred={item.starred ?? false}
+										marked={item.marked}
+										on:change={loadApps}
+										app={item}
+										{moveDrawer}
+										{shareModal}
+										{deploymentDrawer}
+									/>
+								{:else if item.type == 'raw_app'}
+									<RawAppRow
+										bind:deleteConfirmedCallback
+										starred={item.starred ?? false}
+										marked={item.marked}
+										on:change={loadRawApps}
+										app={item}
+										{moveDrawer}
+										{shareModal}
+										{deploymentDrawer}
+									/>
+								{/if}
+							{/key}
 						{/key}
 					{/key}
 				{/each}

package/package/components/home/ListFilters.svelte

@@ -28,7 +28,6 @@ onDestroy(() => {
 });
 loadFilterFromUrl();
 function loadFilterFromUrl() {
-    console.log('LOAD');
     let queryValue = new URL(window.location.href).searchParams.get(queryName) ?? undefined;
     selectedFilter = queryValue;
 }

package/package/components/jobs/JobDetail.svelte

@@ -98,7 +98,7 @@ function endedDate(started_at, duration_ms) {
 					</div>
 
 					<div class="flex flex-row space-x-2">
-						<JobPreview {job}>
+						<JobPreview id={job.id}>
 							<div class="whitespace-nowrap">
 								{#if job.script_path}
 									<a href="/run/{job.id}?workspace={job.workspace_id}">{job.script_path} </a>

package/package/components/jobs/JobPreview.svelte

@@ -9,29 +9,29 @@ import DisplayResult from '../DisplayResult.svelte';
 import JobArgs from '../JobArgs.svelte';
 import { writable } from 'svelte/store';
 import LogViewer from '../LogViewer.svelte';
-import { forLater } from '../../utils';
-const POPUP_HEIGHT = 240;
-export let job;
+import { forLater, msToSec } from '../../utils';
+import { Icon } from 'svelte-awesome';
+import { faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
+import { Badge } from '../common';
+const POPUP_HEIGHT = 320;
+export let id;
+let job = undefined;
 let hovered = false;
 let timeout;
 let watchJob;
-let args = job?.args;
 let result;
 let loaded = false;
 let wrapper;
 let popupOnTop = true;
-$: open = $openStore === job?.id;
+$: open = $openStore === id;
 async function instantOpen() {
     if (!open) {
         hovered = true;
-        if (!job) {
-            return;
-        }
         popupOnTop = wrapper.getBoundingClientRect().top > POPUP_HEIGHT;
-        openStore.set(job.id);
+        openStore.set(id);
         if (!loaded) {
             await tick();
-            watchJob && watchJob(job.id);
+            watchJob && watchJob(id);
         }
     }
     else {
@@ -87,8 +87,18 @@ onDestroy(() => {
 			border border-gray-300 shadow-xl flex justify-start items-start w-[600px] h-80
 			overflow-hidden"
 		>
-			<div class="w-1/2 h-full overflow-auto px-2">
-				<JobArgs {args} tableClass="!pt-0 !min-w-0 !block" />
+			<div class="absolute bottom-0 right-1 flex justify-end gap-2 pb-0.5">
+				<Badge>
+					Mem: {job?.['mem_peak'] ? `${(job['mem_peak'] / 1024).toPrecision(4)}MB` : 'N/A'}
+				</Badge>
+				<Badge>
+					<Icon class="text-gray-700" data={faHourglassHalf} scale={0.5} /><span class="mx-2">
+						Ran in {msToSec(job?.['duration_ms'])}s</span
+					>
+				</Badge>
+			</div>
+			<div class="w-1/2 h-full overflow-auto px-2 -mt-3">
+				<JobArgs args={job?.args} tableClass="!pt-0 !min-w-0 !block" />
 			</div>
 			<div class="w-1/2 h-full overflow-auto p-2">
 				{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}
@@ -101,7 +111,13 @@ onDestroy(() => {
 					<DisplayResult {result} disableExpand />
 				{:else if job && `running` in job ? job.running : false}
 					<div class="text-sm font-semibold text-gray-600 mb-1"> Job is still running </div>
-					<LogViewer content={job?.logs} isLoading />
+					<LogViewer
+						jobId={job?.id}
+						duration={job?.['duration_ms']}
+						mem={job?.['mem_peak']}
+						content={job?.logs}
+						isLoading
+					/>
 				{/if}
 			</div>
 		</div>

package/package/components/jobs/JobPreview.svelte.d.ts

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 export declare const openStore: import("svelte/store").Writable<string>;
-import { Job } from '../../gen';
 declare const __propDef: {
     props: {
-        job: Job | undefined;
+        id: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;