windmill-components 1.70.0 → 1.77.0

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

@@ -0,0 +1,180 @@
+const pkStringGenerator = () => (Math.random() + 1).toString(36).substring(7);
+import { rightCb, leftCb, topCb, bottomCb, } from '../../edges/controllers/anchorCbUser'; // these are callbacks used to calculate anchor position relative to node
+import { dynamicCbCreator, fixedCbCreator, } from '../../edges/controllers/anchorCbDev';
+import { ResizeNode } from '../../resizableNodes/models/ResizeNode';
+import { Anchor } from '../../edges/models/Anchor';
+import { Node } from '../../nodes/models/Node';
+import { Edge } from '../../edges/models/Edge';
+import { writable, derived, get, readable } from 'svelte/store';
+import { getEdgeById, getAnchors } from '../../edges/controllers/util';
+/**
+ * Creates resize node on the bottom right corner of the targeted Node
+ * @param canvasId The canvasId of the Svelvet component that holds the targeted Node
+ * @param nodeId The id of the Node that the resize node attached to
+ * @param posX The number of pixels on the x-axis relative to the left top corner of the targeted Node
+ * @param posY The number of pixels on the y-axis relative to the left top corner of the targeted Node
+ * @returns A ReziseNode object with randomized id, canvasId, nodeId, posX, and posY
+ */
+function createResizeNode(canvasId, nodeId, posX, posY) {
+    const id = pkStringGenerator();
+    const resizeNode = new ResizeNode(id, canvasId, nodeId, posX, posY);
+    return resizeNode;
+}
+/**
+ * Creates an Anchor on the targeted Node with infomation the userNode holds
+ * @param store An object containing the state of the Svelvet component. You can access the following through `store`: nodesStore, edgesStore, anchorsStore, etc.
+ * @param userNode A node that the user specifies. This is NOT the same as a Node object.
+ * @param sourceOrTarget User specified information of source or target
+ * @param canvasId The id of the canvas that holds the Anchor and its attached Node
+ * @param edge An edge that the user specifies. It should target the userNode as source or target. This is NOT the same as an Edge object
+ * @returns An Anchor object
+ */
+function createAnchor(store, userNode, sourceOrTarget, canvasId, edge) {
+    // edge case
+    if (userNode === null)
+        throw `you cannot create an anchor without a user node (for now)`;
+    const edgeId = edge.id;
+    const anchorId = pkStringGenerator();
+    // userCb is the appropriate source or taret callback from userEdge object. It is
+    // possible the user to NOT set userCb in which case userCb will be undefined
+    let userCb;
+    if (sourceOrTarget === 'target')
+        userCb = edge.targetAnchorCb;
+    else
+        userCb = edge.sourceAnchorCb;
+    // create anchor callbacks
+    let cb;
+    if (userCb === undefined)
+        cb = dynamicCbCreator(store, edgeId, anchorId);
+    else
+        cb = fixedCbCreator(store, edgeId, anchorId, userNode.id, userCb);
+    // Create a new anchor.
+    const anchor = new Anchor(anchorId, userNode.id, edgeId, sourceOrTarget, -1, // dummy variables for x,y,angle for now
+    -1, // dummy variables for x,y,angle for now
+    cb, canvasId, 0 // dummy variables for x,y,angle for now
+    );
+    // return
+    return anchor;
+}
+/**
+ * Populates edgesStore of Edges. This function does not return the edgesStore. Instead it sets the nodesStore of Svelvet store.
+ * @param store An object containing the state of the Svelvet component. You can access the following through `store`: nodesStore, edgesStore, anchorsStore, etc.
+ * @param edges An edge that the user specifies. This is NOT the same as a Edge object.
+ * @param canvasId The canvasId of the Svelvet component that holds the Edges
+ */
+export function populateEdgesStore(store, edges, canvasId) {
+    const edgesStore = {};
+    for (let i = 0; i < edges.length; i++) {
+        const userEdge = edges[i];
+        //  { id: 'e1-2', source: 1, type: 'straight', target: 2, label: 'e1-2' },
+        // source is node.id for the source node
+        // target is node.id for the target node
+        // We need to get the anchors
+        const { source: sourceNodeId, target: targetNodeId, id: edgeId, type, label, labelBgColor, labelTextColor, edgeColor, animate, noHandle, arrow, clickCallback, className, } = userEdge;
+        const anchors = getAnchors(store, { edgeId: edgeId });
+        // check that we have two anchors for every edge
+        if (anchors.length !== 2)
+            throw 'We should have two anchors for every node';
+        // check that we have 1 source anchor and 1 target anchor. Since sourceOrTarget is typed to be either 'source'
+        //   or 'target', it suffices to check whether there are two unique elements
+        if (new Set(anchors.map((e) => e.sourceOrTarget)).size !== 2)
+            throw 'we should have one source and one target anchor';
+        // get source and target anchor
+        let sourceAnchor, targetAnchor;
+        if (anchors[0].sourceOrTarget === 'source') {
+            sourceAnchor = anchors[0];
+            targetAnchor = anchors[1];
+        }
+        else {
+            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);
+    }
+    store.edgesStore.set(edgesStore);
+}
+/**
+ * Finds userNode (with UserNodeType; Not the same as the Node) by the node id from nodesStore
+ * @param id The id of the Node in its nodesStore
+ * @param userNodes The array of userNodes (NOT the same as Node object)
+ * @returns The node that user specified or null if not found
+ */
+function findUserNodeById(id, userNodes) {
+    for (let i = 0; i < userNodes.length; i++) {
+        const userNode = userNodes[i];
+        if (userNode.id === id)
+            return userNode;
+    }
+    return null;
+}
+/**
+ * Populates the anchorsStore. This will overwrite any data in the AnchorsStore.
+ * @param store The Svelvet store containing the state of the Svelvet component
+ * @param nodes An array of user specified nodes
+ * @param edges An array of user specified edges
+ * @param canvasId The canvasId of the Svelvet component that holds the nodes and edges
+ */
+export function populateAnchorsStore(store, nodes, edges, canvasId) {
+    // anchorsStore will populated and eventaully synchronized to store.anchorsStore
+    const anchorsStore = {};
+    // iterate through user edges. Note the user never explicitly defines anchors; we calculate anchors
+    // from the user edge/node information
+    for (let i = 0; i < edges.length; i++) {
+        const userEdge = edges[i];
+        // find the source and target userNodes. These will be used to create the nodeId foreign key and
+        // determine placement of the anchor based on userNode.targetPosition, useNode.sourcePosition
+        const { source: sourceNodeId, target: targetNodeId } = userEdge;
+        const sourceUserNode = findUserNodeById(sourceNodeId, nodes);
+        const targetUserNode = findUserNodeById(targetNodeId, nodes);
+        // create source anchor
+        const sourceAnchor = createAnchor(store, sourceUserNode, 'source', canvasId, userEdge);
+        // create target anchor
+        const targetAnchor = createAnchor(store, targetUserNode, 'target', canvasId, userEdge);
+        // store source and target anchors
+        anchorsStore[sourceAnchor.id] = sourceAnchor;
+        anchorsStore[targetAnchor.id] = targetAnchor;
+    }
+    //populates the anchorsStore
+    store.anchorsStore.set(anchorsStore);
+    // set anchor positions. We can only set anchor positions after anchorsStore and nodesStore
+    // has been populated. TODO: maybe add a check to see that anchorsStore and NodesStore populated?
+    const anchors = getAnchors(store);
+    for (const anchor of anchors)
+        anchor.callback();
+}
+/**
+ * Populates the nodesStore. This will overwrite any data in the nodesStore.
+ * @param store The Svelvet store containing the state of the Svelvet component
+ * @param nodes An array of user specifed nodes
+ * @param canvasId The canvasId of the Svelvet component that holds the nodes
+ */
+export function populateNodesStore(store, nodes, canvasId) {
+    // this is the nodesStore object. THIS IS NOT THE SAME AS A NODESTORE
+    const nodesStore = {};
+    // iterate through user nodes and create node objects
+    for (let i = 0; i < nodes.length; i++) {
+        const userNode = nodes[i];
+        const nodeId = userNode.id;
+        // TODO: move sanitizing default values to middleware
+        const node = new Node(nodeId.toString(), userNode.position.x, userNode.position.y, userNode.width, userNode.height, userNode.bgColor ?? 'white', userNode.data, canvasId, userNode.borderColor === undefined ? 'black' : userNode.borderColor, userNode.image === undefined ? false : userNode.image, userNode.src === undefined ? '' : userNode.src, userNode.textColor === undefined ? '' : userNode.textColor, userNode.borderRadius === undefined ? 0 : userNode.borderRadius, userNode.childNodes === undefined ? [] : userNode.childNodes, userNode.className === undefined ? '' : userNode.className, userNode.clickCallback === undefined ? () => { } : userNode.clickCallback);
+        nodesStore[nodeId] = node;
+    }
+    // This is actually what sets the store
+    store.nodesStore.set(nodesStore);
+}
+/**
+ * Populates the resizeNodeStore. If a Node is resizable, a small ResizeNode object is going to be attached to the Node's right bottom corner to react to the mouse drag.
+ * @param store The Svelvet store containing the state of the Svelvet component
+ * @param nodes An array of user specifed nodes (NOT the same as Node)
+ * @param canvasId The canvasId of the Svelvet component that holds the resizeNodes
+ */
+export function populateResizeNodeStore(store, nodes, canvasId) {
+    const resizeNodeStore = {};
+    for (let i = 0; i < nodes.length; i++) {
+        const userNode = nodes[i];
+        const { id, width, height, position } = userNode;
+        const resizeNode = createResizeNode(canvasId, id, position.x + width, position.y + height);
+        resizeNodeStore[resizeNode.id] = resizeNode;
+    }
+    store.resizeNodesStore.set(resizeNodeStore);
+}

package/components/graph/svelvet/store/models/store.d.ts

@@ -0,0 +1,12 @@
+import type { StoreType } from '../types/types';
+/**
+  `store` is a dictionary of Svelvet stores.
+    * The reason why we have multiple Svelvet stores is to handle multiple canvases on the same page.
+    * A Svelvet store is the single source of truth for a canvas state.
+    * We discourage developers from interacting with stores directly; instead use the api methods in
+      `src/lib/controllers/storeApi.ts`. However, if need to direct access you can do so by importing:
+      `import { store } from 'src/lib/models/store';`
+*/
+export declare const stores: {
+    [key: string]: StoreType;
+};

package/components/graph/svelvet/store/models/store.js

@@ -0,0 +1,9 @@
+/**
+  `store` is a dictionary of Svelvet stores.
+    * The reason why we have multiple Svelvet stores is to handle multiple canvases on the same page.
+    * A Svelvet store is the single source of truth for a canvas state.
+    * We discourage developers from interacting with stores directly; instead use the api methods in
+      `src/lib/controllers/storeApi.ts`. However, if need to direct access you can do so by importing:
+      `import { store } from 'src/lib/models/store';`
+*/
+export const stores = {};

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

@@ -0,0 +1,134 @@
+import type { CollapsibleType } from '../../collapsible/types/types';
+import type { Writable } from 'svelte/store';
+import type { AnchorType } from '../../edges/types/types';
+export interface ResizeNodeType {
+    id: string;
+    nodeId: string;
+    edgeId?: string;
+    canvasId: string;
+    anchorId?: string;
+    positionX: number;
+    positionY: number;
+    setPositionAndCascade: Function;
+    setPosition: Function;
+    delete: Function;
+}
+export interface StoreType {
+    nodesStore: Writable<{
+        [key: string]: NodeType;
+    }>;
+    edgesStore: Writable<{
+        [key: string]: EdgeType;
+    }>;
+    anchorsStore: Writable<{
+        [key: string]: AnchorType;
+    }>;
+    resizeNodesStore: Writable<{
+        [key: string]: ResizeNodeType;
+    }>;
+    potentialAnchorsStore: Writable<{
+        [key: string]: PotentialAnchorType;
+    }>;
+    widthStore: Writable<number>;
+    heightStore: Writable<number>;
+    backgroundStore: Writable<boolean>;
+    movementStore: Writable<boolean>;
+    nodeIdSelected: Writable<number>;
+    nodeSelected: Writable<boolean>;
+    d3Scale: Writable<number>;
+    options: Writable<{
+        [key: string]: any;
+    }>;
+    temporaryEdgeStore: Writable<TemporaryEdgeType[]>;
+    nodeCreate: Writable<boolean>;
+    boundary: Writable<boolean | PositionType>;
+    edgeEditModal: Writable<null | string>;
+    collapsibleStore: Writable<CollapsibleType[]>;
+    collapsibleOption: Writable<boolean>;
+    lockedOption: Writable<boolean>;
+    editableOption: Writable<boolean>;
+    d3ZoomParameters: Writable<{
+        [key: string]: number;
+    }>;
+    resizableOption: Writable<boolean>;
+    highlightEdgesOption: Writable<boolean>;
+}
+export interface PositionType {
+    x: number;
+    y: number;
+}
+export interface NodeType {
+    id: string;
+    width: number;
+    height: number;
+    positionX: number;
+    positionY: number;
+    bgColor: string;
+    data: {
+        html?: any;
+        custom?: {
+            component: any;
+            props?: any;
+            cb?: (e: string, detail: any) => void;
+        };
+        img?: any;
+        label?: string;
+    };
+    canvasId: string;
+    setPositionFromMovement: Function;
+    delete: Function;
+    setSizeFromMovement: Function;
+    setExportableData: Function;
+    borderColor: string;
+    image: boolean;
+    src: string;
+    textColor: string;
+    borderRadius: number;
+    childNodes: string[];
+    className: string;
+    clickCallback: Function;
+}
+export interface EdgeType {
+    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;
+    delete: Function;
+    setExportableData: Function;
+}
+export interface PotentialAnchorType {
+    id: string;
+    nodeId: string;
+    callback: Function;
+    positionX: number;
+    positionY: number;
+    angle: number;
+    canvasId: string;
+    delete: Function;
+}
+export interface TemporaryEdgeType {
+    id: string;
+    sourcePotentialAnchorId: string;
+    sourceX: number;
+    sourceY: number;
+    targetPotentialAnchorId: string | null;
+    targetX: number;
+    targetY: number;
+    canvasId: string;
+    type: string;
+    edgeColor: string;
+    createEdge: Function;
+    createNode: Function;
+}

package/components/graph/svelvet/store/types/types.js

@@ -0,0 +1 @@
+export {};

package/components/graph/svelvet/types/README.md

@@ -0,0 +1,3 @@
+# Types
+
+This folder contains types exported to the user, as decribed in feature: `https://www.svelvet.io/docs/typescript/`

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

@@ -0,0 +1,2 @@
+import type { UserEdgeType, UserNodeType } from './types';
+export { UserEdgeType, UserNodeType };

package/components/graph/svelvet/types/index.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,49 @@
+export interface UserNodeType {
+    id: string;
+    width: number;
+    height: number;
+    bgColor?: string;
+    data: {
+        html?: any;
+        custom?: {
+            component: any;
+            props?: any;
+            cb?: (e: string, detail: any) => void;
+        };
+        img?: any;
+    };
+    position: {
+        x: number;
+        y: number;
+    };
+    borderColor?: string | undefined;
+    image?: boolean;
+    src?: string;
+    textColor?: string;
+    targetPosition?: 'left' | 'right' | 'top' | 'bottom';
+    sourcePosition?: 'left' | 'right' | 'top' | 'bottom';
+    borderRadius?: number;
+    childNodes?: string[];
+    className?: string;
+    clickCallback?: Function;
+}
+export interface UserEdgeType {
+    id: string;
+    source: string;
+    target: string;
+    sourceAnchorCb?: Function;
+    targetAnchorCb?: Function;
+    label?: string;
+    labelBgColor?: string;
+    labelTextColor?: string;
+    edgeColor?: string;
+    type?: 'straight' | 'smoothstep' | 'step' | 'bezier' | undefined;
+    animate?: boolean;
+    noHandle?: boolean;
+    arrow?: boolean;
+    clickCallback?: Function;
+    className?: string;
+}
+export declare function getD3PositionX(canvasId: string): number;
+export declare function getD3PositionY(canvasId: string): number;
+export declare function getD3Zoom(canvasId: string): number;

package/components/graph/svelvet/types/types.js

@@ -0,0 +1,18 @@
+import { findStore } from '../store/controllers/storeApi';
+import { get } from 'svelte/store';
+export function getD3PositionX(canvasId) {
+    const store = findStore(canvasId);
+    const width = get(store.widthStore);
+    const x = width / 2 - get(store.d3ZoomParameters).x; // user input is shifted so that x=0, y=0 occurs in the center
+    return x;
+}
+export function getD3PositionY(canvasId) {
+    const store = findStore(canvasId);
+    const height = get(store.heightStore);
+    const y = height / 2 - get(store.d3ZoomParameters).y; // user input is shifted so that x=0, y=0 occurs in the center
+    return y;
+}
+export function getD3Zoom(canvasId) {
+    const store = findStore(canvasId);
+    return get(store.d3ZoomParameters).k;
+}

package/components/graph/util.js

@@ -1,6 +1,6 @@
 export const NODE = {
-    width: 300,
-    height: 35,
+    width: 275,
+    height: 34,
     gap: {
         horizontal: 40,
         vertical: 50

package/components/home/ItemsList.svelte

@@ -1,10 +1,11 @@
 <script>import CenteredPage from '../CenteredPage.svelte';
 import { AppService, FlowService, ListableApp, Script, ScriptService } from '../../gen';
 import { userStore, workspaceStore } from '../../stores';
-import { Skeleton, ToggleButton, ToggleButtonGroup } from '../common';
+import { Alert, Badge, Skeleton, ToggleButton, ToggleButtonGroup } from '../common';
 import { canWrite } from '../../utils';
 import ShareModal from '../ShareModal.svelte';
 import { Code2, LayoutDashboard } from 'lucide-svelte';
+import Toggle from '../Toggle.svelte';
 export let filter = '';
 import ScriptRow from '../common/table/ScriptRow.svelte';
 import FlowRow from '../common/table/FlowRow.svelte';
@@ -15,6 +16,7 @@ import SearchItems from '../SearchItems.svelte';
 import { Icon } from 'svelte-awesome';
 import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
 import MoveDrawer from '../MoveDrawer.svelte';
+import ConfirmationModal from '../common/confirmationModal/ConfirmationModal.svelte';
 let scripts;
 let flows;
 let apps;
@@ -24,9 +26,11 @@ let shareModal;
 let moveDrawer;
 let loading = true;
 let nbDisplayed = 30;
+export let deleteConfirmedCallback = undefined;
 async function loadScripts() {
     const loadedScripts = await ScriptService.listScripts({
         workspace: $workspaceStore,
+        showArchived: archived ? true : undefined,
         perPage: 300
     });
     scripts = loadedScripts.map((script) => {
@@ -40,7 +44,10 @@ async function loadScripts() {
     loading = false;
 }
 async function loadFlows() {
-    flows = (await FlowService.listFlows({ workspace: $workspaceStore })).map((x) => {
+    flows = (await FlowService.listFlows({
+        workspace: $workspaceStore,
+        showArchived: archived ? true : undefined
+    })).map((x) => {
         return {
             canWrite: canWrite(x.path, x.extra_perms, $userStore) &&
                 x.workspace_id == $workspaceStore &&
@@ -95,7 +102,12 @@ $: {
     if ($userStore && $workspaceStore) {
         loadScripts();
         loadFlows();
-        loadApps();
+        if (!archived) {
+            loadApps();
+        }
+        else {
+            apps = [];
+        }
     }
 }
 const cmp = new Intl.Collator('en').compare;
@@ -139,6 +151,7 @@ function resetScroll() {
     }
 }
 $: items && resetScroll();
+let archived = false;
 </script>
 
 <SearchItems
@@ -223,8 +236,14 @@ $: items && resetScroll();
 			</button>
 		</div>
 	</div>
-
-	<ListFilters bind:selectedFilter={ownerFilter} filters={owners} />
+	<div class="relative">
+		<ListFilters bind:selectedFilter={ownerFilter} filters={owners} />
+		{#if !loading}
+			<div class="absolute -bottom-2 right-0 bg-white/90">
+				<Toggle size="xs" bind:checked={archived} options={{ right: 'Show archived' }} /></div
+			>
+		{/if}
+	</div>
 	<div>
 		{#if filteredItems == undefined}
 			<div class="mt-4" />
@@ -240,6 +259,7 @@ $: items && resetScroll();
 				{#each (items ?? []).slice(0, nbDisplayed) as item, i (item.type + '/' + item.path + (item.summary ?? ''))}
 					{#if item.type == 'script'}
 						<ScriptRow
+							bind:deleteConfirmedCallback
 							starred={item.starred ?? false}
 							marked={item.marked}
 							on:change={loadScripts}
@@ -249,6 +269,7 @@ $: items && resetScroll();
 						/>
 					{:else if item.type == 'flow'}
 						<FlowRow
+							bind:deleteConfirmedCallback
 							starred={item.starred ?? false}
 							marked={item.marked}
 							on:change={loadFlows}
@@ -258,6 +279,7 @@ $: items && resetScroll();
 						/>
 					{:else if item.type == 'app'}
 						<AppRow
+							bind:deleteConfirmedCallback
 							starred={item.starred ?? false}
 							marked={item.marked}
 							on:change={loadApps}
@@ -279,3 +301,29 @@ $: items && resetScroll();
 		{/if}
 	</div>
 </CenteredPage>
+
+<ConfirmationModal
+	open={Boolean(deleteConfirmedCallback)}
+	title="Remove"
+	confirmationText="Remove"
+	on:canceled={() => {
+		deleteConfirmedCallback = undefined
+	}}
+	on:confirmed={() => {
+		if (deleteConfirmedCallback) {
+			deleteConfirmedCallback()
+		}
+		deleteConfirmedCallback = undefined
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to remove it?</span>
+		<Alert type="info" title="Bypass confirmation">
+			<div>
+				You can press
+				<Badge color="dark-gray">SHIFT</Badge>
+				while removing to bypass confirmation.
+			</div>
+		</Alert>
+	</div>
+</ConfirmationModal>

package/components/home/ItemsList.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         filter?: string | undefined;
+        deleteConfirmedCallback?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/home/ListFilters.svelte

@@ -10,11 +10,16 @@ export let resourceType = false;
 function getIconComponent(name) {
     return APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]];
 }
+$: filtersAndSelected = selectedFilter
+    ? filters.includes(selectedFilter)
+        ? filters
+        : [selectedFilter, ...filters]
+    : filters;
 </script>
 
-{#if Array.isArray(filters) && filters.length > 0}
+{#if Array.isArray(filtersAndSelected) && filtersAndSelected.length > 0}
 	<div class="gap-2 w-full flex flex-wrap my-4">
-		{#each filters as filter (filter)}
+		{#each filtersAndSelected as filter (filter)}
 			<div in:fade={{ duration: 50 }} animate:flip={{ duration: 100 }}>
 				<Badge
 					class={classNames(

package/components/jobs/JobDetail.svelte

@@ -21,10 +21,21 @@ onMount(() => {
 onDestroy(() => {
     interval && clearInterval(interval);
 });
+function displayIfRecent(date) {
+    const d = new Date(date);
+    const now = new Date();
+    const diff = now.getTime() - d.getTime();
+    if (diff < 1000 * 600) {
+        return `(${displayDaysAgo(d.toString())})`;
+    }
+    else {
+        return '';
+    }
+}
 function endedDate(started_at, duration_ms) {
     const started = new Date(started_at);
     started.setMilliseconds(started.getMilliseconds() + duration_ms);
-    return displayDaysAgo(started.toString());
+    return `${displayDate(started)} ${displayIfRecent(started)}`;
 }
 </script>
 

package/components/propertyPicker/ObjectViewer.svelte

@@ -50,7 +50,11 @@ function selectProp(key, value) {
 			</span>
 		{/if}
 		{#if level == 0 && topBrackets}<span class="h-0">{openBracket}</span>{/if}
-		<ul class="w-full">
+		<ul
+			class={`w-full ${
+				level === 0 ? 'border-none pl-2' : 'border-l border-dotted border-gray-200 pl-2'
+			}`}
+		>
 			{#each keys as key, index}
 				<li class="pt-1">
 					<button on:click={() => selectProp(key, key)} class="whitespace-nowrap">
@@ -80,7 +84,7 @@ function selectProp(key, value) {
 						<button
 							class="val {pureViewer
 								? 'cursor-auto'
-								: ''} rounded hover:bg-blue-100 {getTypeAsString(json[key])}"
+								: ''} rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
 							on:click={() => selectProp(key, json[key])}
 						>
 							{#if json[key] === NEVER_TESTED_THIS_FAR}
@@ -126,8 +130,6 @@ function selectProp(key, value) {
 <style>
 	ul {
 		list-style: none;
-		padding-left: 1rem;
-		border-left: 1px dotted lightgray;
 		font-size: 0.875rem;
 		line-height: 1.25rem;
 	}

package/components/sidebar/SidebarContent.svelte

@@ -40,12 +40,12 @@ export let isCollapsed = false;
 		{/each}
 	</div>
 	<div>
-		<div class="mb-6 md:mb-10">
+		<div class="space-y-0.5 mb-6 md:mb-10">
 			{#each secondaryMenuLinks as menuLink (menuLink.href)}
 				<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
 			{/each}
 		</div>
-		<div>
+		<div class="space-y-0.5">
 			{#each thirdMenuLinks as menuLink (menuLink.href)}
 				<MenuLink class="!text-xs" {...menuLink} {isCollapsed} />
 			{/each}

package/consts.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_WEBHOOK_TYPE: 'async' | 'sync';

package/consts.js

@@ -0,0 +1 @@
+export const DEFAULT_WEBHOOK_TYPE = import.meta.env.VITE_DEFAULT_WEBHOOK_TYPE || 'async';