diff --git a/frontend/src/lib/assets/app.css b/frontend/src/lib/assets/app.css index 6a386c559d..2787103d5b 100644 --- a/frontend/src/lib/assets/app.css +++ b/frontend/src/lib/assets/app.css @@ -4,10 +4,21 @@ @tailwind utilities; @layer base { - *, - ::before, - ::after { - @apply dark:border-gray-600; + + /* Light mode: default border color */ + .border, .border-t, .border-r, .border-b, .border-l, + .border-x, .border-y, + .divide-x > :not([hidden]) ~ :not([hidden]), + .divide-y > :not([hidden]) ~ :not([hidden]) { + border-color: #e5e7eb; /* gray-200 */ + } + + /* Dark mode: change border color */ + .dark .border, .dark .border-t, .dark .border-r, .dark .border-b, .dark .border-l, + .dark .border-x, .dark .border-y, + .dark .divide-x > :not([hidden]) ~ :not([hidden]), + .dark .divide-y > :not([hidden]) ~ :not([hidden]) { + border-color: #4b5563; /* gray-700 */ } /* Chrome, Edge, and Safari */ @@ -82,6 +93,18 @@ } } +.driver-popover-title { + @apply leading-6 !text-primary !text-base; +} + +.driver-popover-description { + @apply !text-secondary !text-sm; +} + +.driver-popover { + @apply p-6 !bg-surface !max-w-2xl; +} + .splitpanes--vertical > .splitpanes__pane { transition: none !important; } @@ -165,3 +188,4 @@ svelte-virtual-list-contents > * + * { rgba(0, 0, 192, 0.6) 20px ); } + diff --git a/frontend/src/lib/components/FlowBuilderTutorials.svelte b/frontend/src/lib/components/FlowBuilderTutorials.svelte index 3f483a4ff9..f482081157 100644 --- a/frontend/src/lib/components/FlowBuilderTutorials.svelte +++ b/frontend/src/lib/components/FlowBuilderTutorials.svelte @@ -81,17 +81,3 @@ You need to create a new flow before starting the tutorial. - - diff --git a/frontend/src/lib/components/FlowHistoryJobPicker.svelte b/frontend/src/lib/components/FlowHistoryJobPicker.svelte index 5a9a661a74..293a4af24c 100644 --- a/frontend/src/lib/components/FlowHistoryJobPicker.svelte +++ b/frontend/src/lib/components/FlowHistoryJobPicker.svelte @@ -8,6 +8,7 @@ export let path: string export let selected: string | undefined = undefined + export let selectInitial: boolean = false const dispatch = createEventDispatcher() async function loadInitial() { @@ -19,7 +20,9 @@ perPage: 1 }) if (jobs.length > 0) { - dispatch('select', { jobId: jobs[0].id, initial: true }) + if (selectInitial) { + dispatch('select', { jobId: jobs[0].id, initial: true }) + } } else { dispatch('nohistory') } diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte index 448e6e89b4..5829d4c8a3 100644 --- a/frontend/src/lib/components/FlowPreviewContent.svelte +++ b/frontend/src/lib/components/FlowPreviewContent.svelte @@ -26,12 +26,18 @@ export let jobId: string | undefined = undefined export let job: Job | undefined = undefined - let selectedJobStep: string | undefined = undefined - let branchOrIterationN: number = 0 - let restartBranchNames: [number, string][] = [] + export let initial: boolean = false - let selectedJobStepIsTopLevel: boolean | undefined = undefined - let selectedJobStepType: 'single' | 'forloop' | 'branchall' = 'single' + export let selectedJobStep: string | undefined = undefined + export let selectedJobStepIsTopLevel: boolean | undefined = undefined + export let selectedJobStepType: 'single' | 'forloop' | 'branchall' = 'single' + export let rightColumnSelect: 'timeline' | 'node_status' | 'node_definition' | 'user_states' = + 'timeline' + + export let branchOrIterationN: number = 0 + export let scrollTop: number = 0 + + let restartBranchNames: [number, string][] = [] let isRunning: boolean = false let jobProgressReset: () => void @@ -59,7 +65,6 @@ const dispatch = createEventDispatcher() let renderCount: number = 0 - let initial: boolean = false let schemaFormWithArgPicker: SchemaFormWithArgPicker | undefined = undefined let currentJobId: string | undefined = undefined @@ -210,6 +215,19 @@ } }) } + + let scrollableDiv: HTMLDivElement | undefined = undefined + function handleScroll() { + scrollTop = scrollableDiv?.scrollTop ?? 0 + } + + $: scrollableDiv && onScrollableDivChange() + + function onScrollableDivChange() { + if (scrollTop != 0 && scrollableDiv) { + scrollableDiv.scrollTop = scrollTop + } + } @@ -375,7 +393,11 @@ -
+
handleScroll()} + >
{ loadIndividualStepsStates() }} @@ -499,6 +522,7 @@ } }} bind:selectedJobStep + bind:rightColumnSelect /> {:else}
Flow status will be displayed here
diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte index b6eb933af7..9584ddb926 100644 --- a/frontend/src/lib/components/FlowStatusViewer.svelte +++ b/frontend/src/lib/components/FlowStatusViewer.svelte @@ -19,7 +19,8 @@ export let hideNodeDefinition = false export let hideJobId = false export let hideDownloadLogs = false - + export let rightColumnSelect: 'timeline' | 'node_status' | 'node_definition' | 'user_states' = + 'timeline' export let isOwner = false export let wideResults = false @@ -77,4 +78,5 @@ {workspaceId} {isOwner} {wideResults} + bind:rightColumnSelect /> diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte index 4e64417e5a..291c1fc2e2 100644 --- a/frontend/src/lib/components/FlowStatusViewerInner.svelte +++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte @@ -13,7 +13,7 @@ import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte' import { createEventDispatcher, getContext, tick } from 'svelte' import { onDestroy } from 'svelte' - import { Badge, Button, Tab } from './common' + import { Badge, Button, Skeleton, Tab } from './common' import DisplayResult from './DisplayResult.svelte' import Tabs from './common/tabs/Tabs.svelte' import { type DurationStatus, type FlowStatusViewerContext, type GraphModuleState } from './graph' @@ -81,6 +81,8 @@ export let isForloopSelected = false export let parentRecursiveRefresh: Record Promise> = {} export let job: Job | undefined = undefined + export let rightColumnSelect: 'timeline' | 'node_status' | 'node_definition' | 'user_states' = + 'timeline' let recursiveRefresh: Record Promise> = {} @@ -96,6 +98,8 @@ $: flowJobIds?.moduleId && onFlowModuleId() + let selectedId: Writable = writable(selectedNode) + function onFlowModuleId() { if (globalRefreshes) { let modId = flowJobIds?.moduleId @@ -793,8 +797,6 @@ let flowTimeline: FlowTimeline - let rightColumnSelect: 'timeline' | 'node_status' | 'node_definition' | 'user_states' = 'timeline' - function loadPreviousIters(lenToAdd: number) { let r = $localDurationStatuses[flowJobIds?.moduleId ?? ''] if (r.iteration_from) { @@ -1244,6 +1246,7 @@
+ {/if} diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte index a72d54356b..f066647fa0 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte @@ -70,7 +70,7 @@