windmill-components 1.448.50 → 1.472.2

package/package/components/FlowPreviewContent.svelte

@@ -1,21 +1,25 @@
 <script>import { JobService } from '../gen';
 import { workspaceStore } from '../stores';
-import { Badge, Button, Drawer, Popup } from './common';
+import { Badge, Button } from './common';
+import Popover from './meltComponents/Popover.svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { runFlowPreview } from './flows/utils';
 import SchemaForm from './SchemaForm.svelte';
+import SchemaFormWithArgPicker from './SchemaFormWithArgPicker.svelte';
 import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
 import FlowProgressBar from './flows/FlowProgressBar.svelte';
-import { AlertTriangle, ArrowRight, CornerDownLeft, Play, RefreshCw, X, ArrowLeftIcon } from 'lucide-svelte';
+import { AlertTriangle, ArrowRight, CornerDownLeft, Play, RefreshCw, X } from 'lucide-svelte';
 import { emptyString, sendUserToast } from '../utils';
-import DrawerContent from './common/drawer/DrawerContent.svelte';
-import SavedInputs from './SavedInputs.svelte';
 import { dfs } from './flows/dfs';
 import { sliceModules } from './flows/flowStateUtils';
-import CapturesInputs from './CapturesInputs.svelte';
-import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
+import InputSelectedBadge from './schema/InputSelectedBadge.svelte';
+import Toggle from './Toggle.svelte';
+import JsonInputs from './JsonInputs.svelte';
+import FlowHistoryJobPicker from './FlowHistoryJobPicker.svelte';
+import { NEVER_TESTED_THIS_FAR } from './flows/models';
 export let previewMode;
 export let open;
+export let preventEscape = false;
 export let jobId = undefined;
 export let job = undefined;
 let selectedJobStep = undefined;
@@ -25,12 +29,20 @@ let selectedJobStepIsTopLevel = undefined;
 let selectedJobStepType = 'single';
 let isRunning = false;
 let jobProgressReset;
+let jsonView = false;
+let jsonEditor;
+let schemaHeight = 0;
+let isValid = true;
 export function test() {
     renderCount++;
     runPreview($previewArgs, undefined);
 }
 const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, initialPath, customUi, executionCount } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
+let renderCount = 0;
+let initial = false;
+let schemaFormWithArgPicker = undefined;
+let currentJobId = undefined;
 function extractFlow(previewMode) {
     if (previewMode === 'whole') {
         return $flowStore;
@@ -47,18 +59,26 @@ function extractFlow(previewMode) {
 }
 let lastPreviewFlow = undefined;
 export async function runPreview(args, restartedFrom) {
+    if (initial) {
+        initial = false;
+    }
     try {
         lastPreviewFlow = JSON.stringify($flowStore);
         jobProgressReset();
         const newFlow = extractFlow(previewMode);
         jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
         isRunning = true;
+        if (inputSelected) {
+            savedArgs = $previewArgs;
+            inputSelected = undefined;
+        }
     }
     catch (e) {
         sendUserToast('Could not run preview', true, undefined, e.toString());
         isRunning = false;
         jobId = undefined;
     }
+    schemaFormWithArgPicker?.refreshHistory();
 }
 function onKeyDown(event) {
     if (open) {
@@ -69,6 +89,13 @@ function onKeyDown(event) {
                     runPreview($previewArgs, undefined);
                 }
                 break;
+            case 'Escape':
+                if (preventEscape) {
+                    selectInput(undefined);
+                    event.preventDefault();
+                    event.stopPropagation;
+                }
+                break;
         }
     }
 }
@@ -94,94 +121,66 @@ function onSelectedJobStepChange() {
         }
     }
 }
+let savedArgs = $previewArgs;
+let inputSelected = undefined;
+async function selectInput(input, type) {
+    if (!input) {
+        $previewArgs = savedArgs;
+        inputSelected = undefined;
+        setTimeout(() => {
+            preventEscape = false;
+        }, 100);
+    }
+    else {
+        $previewArgs = input;
+        inputSelected = type;
+        preventEscape = true;
+        jsonEditor?.setCode(JSON.stringify($previewArgs ?? {}, null, '\t'));
+    }
+}
+export function refresh() {
+    renderCount++;
+}
 $: if (job?.type === 'CompletedJob') {
     isRunning = false;
 }
 $: selectedJobStep !== undefined && onSelectedJobStepChange();
-let inputLibraryDrawer;
-let captureLibraryDrawer;
-let renderCount = 0;
-let selectedCapture = undefined;
+async function loadIndividualStepsStates() {
+    // console.log('loadIndividualStepsStates')
+    dfs($flowStore.value.modules, async (module) => {
+        // console.log('module', $flowStateStore[module.id], module.id)
+        const prev = $flowStateStore[module.id]?.previewResult;
+        if (prev && prev != NEVER_TESTED_THIS_FAR) {
+            return;
+        }
+        const previousJobId = await JobService.listJobs({
+            workspace: $workspaceStore,
+            scriptPathExact: (initialPath == '' ? $pathStore : initialPath) + '/' + module.id,
+            jobKinds: ['preview', 'script', 'flowpreview', 'flow'].join(','),
+            page: 1,
+            perPage: 1
+        });
+        // console.log('previousJobId', previousJobId, module.id)
+        if (previousJobId.length > 0) {
+            const getJobResult = await JobService.getCompletedJobResultMaybe({
+                workspace: $workspaceStore,
+                id: previousJobId[0].id
+            });
+            if (getJobResult.result) {
+                $flowStateStore[module.id] = {
+                    ...($flowStateStore[module.id] ?? {}),
+                    previewResult: getJobResult.result
+                };
+            }
+        }
+    });
+}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
 
-<Drawer bind:this={inputLibraryDrawer}>
-	<DrawerContent title="Input library {initialPath}" on:close={inputLibraryDrawer?.toggleDrawer}>
-		<SavedInputs
-			flowPath={initialPath}
-			isValid={true}
-			args={$previewArgs}
-			on:selected_args={(e) => {
-				$previewArgs = JSON.parse(JSON.stringify(e.detail))
-				inputLibraryDrawer?.closeDrawer()
-				renderCount++
-			}}
-		/>
-	</DrawerContent>
-</Drawer>
-
-<Drawer bind:this={captureLibraryDrawer}>
-	<DrawerContent
-		title="Trigger captures library {initialPath}"
-		on:close={captureLibraryDrawer?.toggleDrawer}
-	>
-		<div class="h-full flex flex-col gap-2">
-			<div class="min-h-0 grow h-full">
-				<CapturesInputs
-					flowPath={$pathStore}
-					headless={false}
-					addButton={true}
-					on:select={(e) => {
-						selectedCapture = e.detail
-					}}
-					on:openTriggers={(e) => {
-						dispatch('openTriggers', e.detail)
-						captureLibraryDrawer?.closeDrawer()
-					}}
-				/>
-			</div>
-
-			<div class="w-full flex flex-col gap-2 px-2 py-2 h-[50%]">
-				<div class="w-full flex flex-col">
-					<Button
-						color="blue"
-						btnClasses="w-full"
-						size="sm"
-						spacingSize="xl"
-						on:click={async () => {
-							$previewArgs = JSON.parse(JSON.stringify(selectedCapture))
-							captureLibraryDrawer?.closeDrawer()
-							renderCount++
-						}}
-						disabled={!selectedCapture}
-					>
-						<ArrowLeftIcon class="w-4 h-4 mr-2" />
-						Use input
-					</Button>
-				</div>
-				<div class="w-full min-h-0 grow overflow-auto">
-					{#if typeof selectedCapture == 'string' && selectedCapture == 'WINDMILL_TOO_BIG'}
-						<div class="text-secondary mt-2">
-							Payload too big to preview but can still be loaded</div
-						>
-					{:else if Object.keys(selectedCapture || {}).length > 0}
-						<div class=" overflow-auto h-full p-2">
-							<ObjectViewer json={selectedCapture} />
-						</div>
-					{:else}
-						<div class="text-center text-tertiary">
-							Select an Input to preview scripts arguments
-						</div>
-					{/if}
-				</div>
-			</div>
-		</div>
-	</DrawerContent>
-</Drawer>
-
-<div class="flex flex-col space-y-2 h-screen bg-surface px-6 py-2 w-full" id="flow-preview-content">
-	<div class="flex flex-row justify-between w-full items-center gap-x-2">
+<div class="flex flex-col space-y-2 h-screen bg-surface px-4 py-2 w-full" id="flow-preview-content">
+	<div class="flex flex-row w-full items-center gap-x-2">
 		<div class="w-8">
 			<Button
 				on:click={() => dispatch('close')}
@@ -194,28 +193,30 @@ let selectedCapture = undefined;
 		</div>
 
 		{#if isRunning}
-			<Button
-				color="red"
-				on:click={async () => {
-					isRunning = false
-					try {
-						jobId &&
-							(await JobService.cancelQueuedJob({
-								workspace: $workspaceStore ?? '',
-								id: jobId,
-								requestBody: {}
-							}))
-					} catch {}
-				}}
-				size="sm"
-				btnClasses="w-full max-w-lg"
-				loading={true}
-				clickableWhileLoading
-			>
-				Cancel
-			</Button>
+			<div class="mx-auto">
+				<Button
+					color="red"
+					on:click={async () => {
+						isRunning = false
+						try {
+							jobId &&
+								(await JobService.cancelQueuedJob({
+									workspace: $workspaceStore ?? '',
+									id: jobId,
+									requestBody: {}
+								}))
+						} catch {}
+					}}
+					size="sm"
+					btnClasses="w-full max-w-lg"
+					loading={true}
+					clickableWhileLoading
+				>
+					Cancel
+				</Button>
+			</div>
 		{:else}
-			<div class="flex flex-row gap-4">
+			<div class="grow justify-center flex flex-row gap-4">
 				{#if jobId !== undefined && selectedJobStep !== undefined && selectedJobStepIsTopLevel}
 					{#if selectedJobStepType == 'single'}
 						<Button
@@ -238,7 +239,10 @@ let selectedCapture = undefined;
 							</Badge>
 						</Button>
 					{:else}
-						<Popup floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}>
+						<Popover
+							floatingConfig={{ strategy: 'absolute', placement: 'bottom-start' }}
+							contentClasses="p-4"
+						>
 							<svelte:fragment slot="button">
 								<Button
 									title={`Re-start this flow from step ${selectedJobStep} (included).`}
@@ -260,49 +264,51 @@ let selectedCapture = undefined;
 									</Badge>
 								</Button>
 							</svelte:fragment>
-							<label class="block text-primary">
-								<div class="pb-1 text-sm text-secondary"
-									>{selectedJobStepType == 'forloop' ? 'From iteration #:' : 'From branch:'}</div
-								>
-								<div class="flex w-full">
-									{#if selectedJobStepType === 'forloop'}
-										<input
-											type="number"
-											min="0"
-											bind:value={branchOrIterationN}
-											class="!w-32 grow"
-											on:click|stopPropagation={() => {}}
-										/>
-									{:else}
-										<select
-											bind:value={branchOrIterationN}
-											class="!w-32 grow"
-											on:click|stopPropagation={() => {}}
-										>
-											{#each restartBranchNames as [branchIdx, branchName]}
-												<option value={branchIdx}>{branchName}</option>
-											{/each}
-										</select>
-									{/if}
-									<Button
-										size="xs"
-										color="blue"
-										buttonType="button"
-										btnClasses="!p-1 !w-[34px] !ml-1"
-										aria-label="Restart flow"
-										on:click|once={() => {
-											runPreview($previewArgs, {
-												flow_job_id: jobId,
-												step_id: selectedJobStep,
-												branch_or_iteration_n: branchOrIterationN
-											})
-										}}
+							<svelte:fragment slot="content">
+								<label class="block text-primary p-4">
+									<div class="pb-1 text-sm text-secondary"
+										>{selectedJobStepType == 'forloop' ? 'From iteration #:' : 'From branch:'}</div
 									>
-										<ArrowRight size={18} />
-									</Button>
-								</div>
-							</label>
-						</Popup>
+									<div class="flex w-full">
+										{#if selectedJobStepType === 'forloop'}
+											<input
+												type="number"
+												min="0"
+												bind:value={branchOrIterationN}
+												class="!w-32 grow"
+												on:click|stopPropagation={() => {}}
+											/>
+										{:else}
+											<select
+												bind:value={branchOrIterationN}
+												class="!w-32 grow"
+												on:click|stopPropagation={() => {}}
+											>
+												{#each restartBranchNames as [branchIdx, branchName]}
+													<option value={branchIdx}>{branchName}</option>
+												{/each}
+											</select>
+										{/if}
+										<Button
+											size="xs"
+											color="blue"
+											buttonType="button"
+											btnClasses="!p-1 !w-[34px] !ml-1"
+											aria-label="Restart flow"
+											on:click|once={() => {
+												runPreview($previewArgs, {
+													flow_job_id: jobId,
+													step_id: selectedJobStep,
+													branch_or_iteration_n: branchOrIterationN
+												})
+											}}
+										>
+											<ArrowRight size={18} />
+										</Button>
+									</div>
+								</label>
+							</svelte:fragment>
+						</Popover>
 					{/if}
 				{/if}
 				<Button
@@ -319,26 +325,6 @@ let selectedCapture = undefined;
 				</Button>
 			</div>
 		{/if}
-		<div class="flex gap-2">
-			<Button
-				btnClasses="h-full truncate"
-				size="sm"
-				variant="border"
-				on:click={() => {
-					captureLibraryDrawer?.openDrawer()
-				}}>Trigger captures library</Button
-			>
-			{#if initialPath != ''}
-				<Button
-					btnClasses="h-full truncate"
-					size="sm"
-					variant="border"
-					on:click={() => {
-						inputLibraryDrawer?.openDrawer()
-					}}>Past runs/Input library</Button
-				>
-			{/if}
-		</div>
 	</div>
 	<div class="w-full flex flex-col gap-y-1">
 		{#if lastPreviewFlow && JSON.stringify($flowStore) != lastPreviewFlow}
@@ -354,31 +340,127 @@ let selectedCapture = undefined;
 		<FlowProgressBar {job} bind:reset={jobProgressReset} />
 	</div>
 
-	<div class="overflow-y-auto grow flex flex-col pr-4">
+	<div class="overflow-y-auto grow flex flex-col pt-4">
 		<div class="border-b">
-			{#key renderCount}
-				<SchemaForm
-					noVariablePicker
-					compact
-					class="py-4 max-w-3xl"
-					schema={$flowStore.schema}
-					bind:args={$previewArgs}
-				/>
-			{/key}
+			<SchemaFormWithArgPicker
+				bind:this={schemaFormWithArgPicker}
+				runnableId={initialPath == '' ? $pathStore : initialPath}
+				runnableType={'FlowPath'}
+				previewArgs={$previewArgs}
+				on:openTriggers
+				on:select={(e) => {
+					selectInput(e.detail.payload, e.detail?.type)
+				}}
+				{isValid}
+				{jsonView}
+			>
+				<div class="w-full flex flex-row justify-between">
+					<InputSelectedBadge
+						on:click={() => schemaFormWithArgPicker?.resetSelected()}
+						{inputSelected}
+					/>
+					<div class="flex flex-row gap-2">
+						<Toggle
+							bind:checked={jsonView}
+							label="JSON View"
+							size="xs"
+							options={{
+								right: 'JSON',
+								rightTooltip: 'Fill args from JSON'
+							}}
+							lightMode
+							on:change={(e) => {
+								jsonEditor?.setCode(JSON.stringify($previewArgs ?? {}, null, '\t'))
+								refresh()
+							}}
+						/>
+					</div>
+				</div>
+				{#if jsonView}
+					<div class="py-2" style="height: {Math.max(schemaHeight, 100)}px" data-schema-picker>
+						<JsonInputs
+							bind:this={jsonEditor}
+							on:select={(e) => {
+								if (e.detail) {
+									$previewArgs = e.detail
+								}
+							}}
+							updateOnBlur={false}
+							placeholder={`Write args as JSON.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}`}
+						/>
+					</div>
+				{:else}
+					{#key renderCount}
+						<div bind:clientHeight={schemaHeight} class="min-h-[40vh]">
+							<SchemaForm
+								noVariablePicker
+								compact
+								schema={$flowStore.schema}
+								bind:args={$previewArgs}
+								on:change={() => {
+									savedArgs = $previewArgs
+								}}
+								bind:isValid
+							/>
+						</div>
+					{/key}
+				{/if}
+			</SchemaFormWithArgPicker>
 		</div>
-		<div class="pt-4 flex flex-col grow">
+		<div class="pt-4 flex flex-col grow relative">
+			<div
+				class="absolute top-[22px] right-2 border p-1.5 hover:bg-surface-hover rounded-md center-center"
+			>
+				<FlowHistoryJobPicker
+					on:nohistory={() => {
+						loadIndividualStepsStates()
+					}}
+					on:select={(e) => {
+						if (!currentJobId) {
+							currentJobId = jobId
+						}
+						const detail = e.detail
+						initial = detail.initial
+						jobId = detail.jobId
+					}}
+					on:unselect={() => {
+						jobId = currentJobId
+						currentJobId = undefined
+					}}
+					path={initialPath == '' ? $pathStore : initialPath}
+				/>
+			</div>
 			{#if jobId}
+				{#if initial}
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div
+						on:click={() => {
+							initial = false
+						}}
+						class="cursor-pointer h-full hover:bg-gray-500/20 dark:hover:bg-gray-500/20 dark:bg-gray-500/80 rounded bg-gray-500/40 absolute top-0 left-0 w-full z-50"
+					>
+						<div class="text-center text-primary text-lg py-2 pt-20"
+							><span class="font-bold border p-2 bg-surface-secondary rounded-md"
+								>Previous run of this flow from history</span
+							></div
+						>
+					</div>
+				{/if}
 				<FlowStatusViewer
 					hideDownloadInGraph={customUi?.downloadLogs === false}
 					wideResults
 					{flowStateStore}
 					{jobId}
 					on:done={() => {
-						console.log('done')
 						$executionCount = $executionCount + 1
 					}}
 					on:jobsLoaded={({ detail }) => {
 						job = detail
+						if (initial) {
+							console.log('loading initial steps after initial job loaded')
+							loadIndividualStepsStates()
+						}
 					}}
 					bind:selectedJobStep
 				/>

package/package/components/FlowPreviewContent.svelte.d.ts

@@ -4,10 +4,12 @@ declare const __propDef: {
     props: {
         previewMode: 'upTo' | 'whole';
         open: boolean;
+        preventEscape?: boolean | undefined;
         jobId?: string | undefined;
         job?: Job | undefined;
         test?: (() => void) | undefined;
         runPreview?: ((args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<void>) | undefined;
+        refresh?: (() => void) | undefined;
     };
     events: {
         openTriggers: CustomEvent<any>;
@@ -23,5 +25,6 @@ export type FlowPreviewContentSlots = typeof __propDef.slots;
 export default class FlowPreviewContent extends SvelteComponent<FlowPreviewContentProps, FlowPreviewContentEvents, FlowPreviewContentSlots> {
     get test(): () => void;
     get runPreview(): (args: Record<string, any>, restartedFrom: RestartedFrom | undefined) => Promise<void>;
+    get refresh(): () => void;
 }
 export {};

package/package/components/FlowStatusViewerInner.svelte

@@ -51,7 +51,7 @@ export let job = undefined;
 let recursiveRefresh = {};
 let jobResults = flowJobIds?.flowJobs?.map((x, id) => `iter #${id + 1} not loaded by frontend yet`) ?? [];
 let retry_selected = '';
-let timeout;
+let timeout = undefined;
 let localModuleStates = writable({});
 let localDurationStatuses = writable({});
 let expandedSubflows = {};
@@ -308,7 +308,7 @@ function updateInnerModules() {
         });
     }
 }
-$: isForloopSelected && globalModuleStates && loadJobInProgress();
+$: isForloopSelected && globalModuleStates && debounceLoadJobInProgress();
 async function getNewJob(jobId, initialJob) {
     if (jobId == initialJob?.id &&
         initialJob?.id != undefined &&
@@ -323,10 +323,30 @@ async function getNewJob(jobId, initialJob) {
         });
     }
 }
+let debounceJobId = undefined;
+let lastRefreshed = undefined;
+function debounceLoadJobInProgress() {
+    const pollingRate = reducedPolling ? 5000 : 1000;
+    if (lastRefreshed &&
+        new Date().getTime() - lastRefreshed.getTime() < pollingRate &&
+        debounceJobId == jobId) {
+        timeout && clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+        loadJobInProgress();
+        lastRefreshed = new Date();
+        debounceJobId = jobId;
+        timeout = undefined;
+    }, pollingRate);
+}
 let errorCount = 0;
 let notAnonynmous = false;
+let started = false;
 async function loadJobInProgress() {
-    dispatch('start');
+    if (!started) {
+        started = true;
+        dispatch('start');
+    }
     if (jobId != '00000000-0000-0000-0000-000000000000') {
         try {
             const newJob = await getNewJob(jobId, initialJob);
@@ -349,7 +369,7 @@ async function loadJobInProgress() {
         }
     }
     if (job?.type !== 'CompletedJob' && errorCount < 4 && !destroyed) {
-        timeout = setTimeout(() => loadJobInProgress(), reducedPolling ? 5000 : 1000);
+        debounceLoadJobInProgress();
     }
     else {
         dispatch('done', job);
@@ -650,7 +670,7 @@ let subflowsSize = 500;
 		As a non logged in user, you can only see jobs ran by anonymous users like you
 	</Alert>
 {:else if job}
-	<div class="flow-root w-full space-y-4 {wideResults ? '' : 'max-w-7xl'} mx-auto px-4">
+	<div class="flow-root w-full space-y-4 {wideResults ? '' : 'max-w-7xl px-4'} mx-auto">
 		<!-- {#if innerModules.length > 0 && true}
 			<h3 class="text-md leading-6 font-bold text-primay border-b pb-2">Flow result</h3>
 		{:else}
@@ -762,6 +782,8 @@ let subflowsSize = 500;
 					<Tab value="graph"><span class="font-semibold text-md">Graph</span></Tab>
 					<Tab value="sequence"><span class="font-semibold">Details</span></Tab>
 				</Tabs>
+			{:else}
+				<div class="h-[30px]" />
 			{/if}
 		{/if}
 		<div class="{selected != 'sequence' ? 'hidden' : ''} max-w-7xl mx-auto">
@@ -1113,7 +1135,7 @@ let subflowsSize = 500;
 								durationStatuses={localDurationStatuses}
 							/>
 						{:else if rightColumnSelect == 'node_status'}
-							<div class="pt-2 max-h-[80vh] grow flex flex-col">
+							<div class="pt-2 grow flex flex-col">
 								{#if selectedNode}
 									{@const node = $localModuleStates[selectedNode]}
 
@@ -1192,7 +1214,6 @@ let subflowsSize = 500;
 												/>
 											</div>
 										{/if}
-
 										<FlowJobResult
 											workspaceId={job?.workspace_id}
 											jobId={node.job_id}

package/package/components/FlowStatusWaitingForEvents.svelte

@@ -4,9 +4,9 @@ import { workspaceStore } from '../stores';
 import { sendUserToast } from '../toast';
 import { X } from 'lucide-svelte';
 import DisplayResult from './DisplayResult.svelte';
-import LightweightSchemaForm from './LightweightSchemaForm.svelte';
 import Tooltip from './Tooltip.svelte';
 import { Button } from './common';
+import SchemaForm from './SchemaForm.svelte';
 export let isOwner;
 export let workspaceId;
 export let job;
@@ -134,7 +134,7 @@ async function continu(approve) {
 
 				{#if job?.raw_flow?.modules?.[approvalStep]?.suspend?.resume_form?.schema}
 					<div class="w-full border rounded-lg p-2">
-						<LightweightSchemaForm bind:args={default_payload} {defaultValues} {schema} />
+						<SchemaForm onlyMaskPassword bind:args={default_payload} {defaultValues} {schema} />
 					</div>
 				{/if}
 				<Tooltip