From b8f7fac12bcae8de7f176b6f69d50fd8d0a94f03 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 6 Jul 2024 02:34:41 +0200
Subject: [PATCH] flow layout improvements

---
 .../lib/components/FlowGraphViewerStep.svelte |   4 +-
 .../src/lib/components/FlowJobResult.svelte   |   8 +-
 .../components/FlowStatusViewerInner.svelte   |   8 +-
 .../src/lib/components/HighlightTheme.svelte  | 152 +++++++++---------
 4 files changed, 87 insertions(+), 85 deletions(-)

diff --git a/frontend/src/lib/components/FlowGraphViewerStep.svelte b/frontend/src/lib/components/FlowGraphViewerStep.svelte
index 90746650ec..79131f9108 100644
--- a/frontend/src/lib/components/FlowGraphViewerStep.svelte
+++ b/frontend/src/lib/components/FlowGraphViewerStep.svelte
@@ -66,7 +66,7 @@
 				<span class="!text-xs">
 					<HighlightCode language={stepDetail.value.language} code={stepDetail.value.content} />
 				</span>
-				<h3 class="mb-2">Lockfile</h3>
+				<h3 class="mt-4 mb-2">Lockfile</h3>
 				<div>
 					{#if stepDetail.value.lock}
 						<pre class="bg-surface-secondary text-sm p-2 h-full overflow-auto w-full"
@@ -171,7 +171,7 @@
 							>{stepDetail.value.lock}</pre
 						>
 					{:else}
-						<p class="bg-surface-secondary text-sm p-2">
+						<p class="bg-surface-secondary text-sm p-2 rounded">
 							There is no lockfile for this inline script
 						</p>
 					{/if}
diff --git a/frontend/src/lib/components/FlowJobResult.svelte b/frontend/src/lib/components/FlowJobResult.svelte
index e8f7de7803..41209fad98 100644
--- a/frontend/src/lib/components/FlowJobResult.svelte
+++ b/frontend/src/lib/components/FlowJobResult.svelte
@@ -64,9 +64,11 @@
 </Drawer>
 <div
 	class:border={!noBorder}
-	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow border border-tertiary-inverse h-full"
+	class="grid {!col
+		? 'grid-cols-2'
+		: 'grid-rows-2'} shadow border border-tertiary-inverse grow overflow-hidden"
 >
-	<div class="bg-surface {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
+	<div class="bg-surface {col ? '' : 'max-h-80'} p-1 overflow-auto relative">
 		<span class="text-tertiary">Result</span>
 		{#if result !== undefined}
 			<DisplayResult {workspaceId} {jobId} {filename} {result} />
@@ -76,7 +78,7 @@
 			<div class="text-gray-400">No result (result is undefined)</div>
 		{/if}
 	</div>
-	<div class="overflow-auto {col ? '' : 'max-h-80'} h-full relative">
+	<div class="overflow-auto {col ? '' : 'max-h-80'} relative">
 		<div class="absolute z-40 text-sm top-1.5 left-2"
 			><button class="" on:click={drawer.openDrawer}>explore all steps' logs</button></div
 		>
diff --git a/frontend/src/lib/components/FlowStatusViewerInner.svelte b/frontend/src/lib/components/FlowStatusViewerInner.svelte
index d693bfd45b..b356e198cc 100644
--- a/frontend/src/lib/components/FlowStatusViewerInner.svelte
+++ b/frontend/src/lib/components/FlowStatusViewerInner.svelte
@@ -87,6 +87,7 @@
 
 	function setModuleState(key: string, value: GraphModuleState) {
 		if (!deepEqual($localModuleStates[key], value)) {
+			// console.log('Setting module state', key, value)
 			$localModuleStates[key] = value
 
 			globalModuleStates.forEach((s) => {
@@ -337,6 +338,7 @@
 		j: number
 	) {
 		let modId = flowJobIds?.moduleId
+
 		if (modId) {
 			if ($flowStateStore && $flowStateStore?.[modId] == undefined) {
 				$flowStateStore[modId] = {
@@ -815,7 +817,7 @@
 						/>
 					</div>
 					<div
-						class="border-l border-tertiary-inverse pt-1 overflow-auto min-h-[700px] flex flex-col z-0"
+						class="border-l border-tertiary-inverse pt-1 overflow-auto min-h-[700px] flex flex-col z-0 h-full"
 					>
 						<Tabs bind:selected={rightColumnSelect}>
 							<Tab value="timeline"><span class="font-semibold text-md">Timeline</span></Tab>
@@ -835,7 +837,7 @@
 								durationStatuses={localDurationStatuses}
 							/>
 						{:else if rightColumnSelect == 'node_status'}
-							<div class="pt-2 max-h-[80vh]">
+							<div class="pt-2 max-h-[80vh] grow flex flex-col">
 								{#if selectedNode}
 									{@const node = $localModuleStates[selectedNode]}
 
@@ -864,7 +866,7 @@
 											<p class="p-2 text-secondary">No arguments</p>
 										{/if}
 									{:else if node}
-										<div class="px-2 flex gap-2 min-w-0 overflow-hidden w-full">
+										<div class="px-2 flex gap-2 min-w-0 w-full">
 											<ModuleStatus type={node.type} scheduled_for={node.scheduled_for} />
 											{#if node.duration_ms}
 												<Badge>
diff --git a/frontend/src/lib/components/HighlightTheme.svelte b/frontend/src/lib/components/HighlightTheme.svelte
index 98ebd0b3b2..44cfe7decf 100644
--- a/frontend/src/lib/components/HighlightTheme.svelte
+++ b/frontend/src/lib/components/HighlightTheme.svelte
@@ -12,233 +12,231 @@
 	code.hljs {
 		padding: 3px 5px;
 	}
-
 	.dark .hljs {
-		background: #2e3440;
+		background: #2e3440 !important;
 	}
 	.dark .hljs,
 	.dark .hljs-subst {
-		color: #d8dee9;
+		color: #d8dee9 !important;
 	}
 	.dark .hljs-selector-tag {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	.dark .hljs-selector-id {
-		color: #8fbcbb;
-		font-weight: bold;
+		color: #8fbcbb !important;
+		font-weight: bold !important;
 	}
 	.dark .hljs-selector-class {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	.dark .hljs-selector-attr {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	.dark .hljs-property {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .hljs-selector-pseudo {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .hljs-addition {
-		background-color: rgba(163, 190, 140, 0.5);
+		background-color: rgba(163, 190, 140, 0.5) !important;
 	}
 	.dark .hljs-deletion {
-		background-color: rgba(191, 97, 106, 0.5);
+		background-color: rgba(191, 97, 106, 0.5) !important;
 	}
 	.dark .hljs-built_in,
 	.dark .hljs-type {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	.dark .hljs-class {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	.dark .hljs-function {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .hljs-title.hljs-function,
 	.dark .hljs-function > .hljs-title {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .hljs-keyword,
 	.dark .hljs-literal,
 	.dark .hljs-symbol {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	.dark .hljs-number {
-		color: #b48ead;
+		color: #b48ead !important;
 	}
 	.dark .hljs-regexp {
-		color: #ebcb8b;
+		color: #ebcb8b !important;
 	}
 	.dark .hljs-string {
-		color: #a3be8c;
+		color: #a3be8c !important;
 	}
 	.dark .hljs-title {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	.dark .hljs-params {
-		color: #d8dee9;
+		color: #d8dee9 !important;
 	}
 	.dark .hljs-bullet {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	.dark .hljs-code {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	.dark .hljs-emphasis {
-		font-style: italic;
+		font-style: italic !important;
 	}
 	.dark .hljs-formula {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	.dark .hljs-strong {
-		font-weight: bold;
+		font-weight: bold !important;
 	}
 	.dark .hljs-link:hover {
-		-webkit-text-decoration: underline;
-		text-decoration: underline;
+		-webkit-text-decoration: underline !important;
+		text-decoration: underline !important;
 	}
 	.dark .hljs-quote {
-		color: #4c566a;
+		color: #4c566a !important;
 	}
 	.dark .hljs-comment {
-		color: #4c566a;
+		color: #4c566a !important;
 	}
 	.dark .hljs-doctag {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	.dark .hljs-meta,
 	.dark .hljs-meta .hljs-keyword {
-		color: #5e81ac;
+		color: #5e81ac !important;
 	}
 	.dark .hljs-meta .hljs-string {
-		color: #a3be8c;
+		color: #a3be8c !important;
 	}
 	.dark .hljs-attr {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	.dark .hljs-attribute {
-		color: #d8dee9;
+		color: #d8dee9 !important;
 	}
 	.dark .hljs-name {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	.dark .hljs-section {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .hljs-tag {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	.dark .hljs-variable {
-		color: #d8dee9;
+		color: #d8dee9 !important;
 	}
 	.dark .hljs-template-variable {
-		color: #d8dee9;
+		color: #d8dee9 !important;
 	}
 	.dark .hljs-template-tag {
-		color: #5e81ac;
+		color: #5e81ac !important;
 	}
 	.dark .language-abnf .hljs-attribute {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .language-abnf .hljs-symbol {
-		color: #ebcb8b;
+		color: #ebcb8b !important;
 	}
 	.dark .language-apache .hljs-attribute {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .language-apache .hljs-section {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	.dark .language-arduino .hljs-built_in {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .language-aspectj .hljs-meta {
-		color: #d08770;
+		color: #d08770 !important;
 	}
 	.dark .language-aspectj > .hljs-title {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .language-bnf .hljs-attribute {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	.dark .language-clojure .hljs-name {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .language-clojure .hljs-symbol {
-		color: #ebcb8b;
+		color: #ebcb8b !important;
 	}
 	.dark .language-coq .hljs-built_in {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .language-cpp .hljs-meta .hljs-string {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	.dark .language-css .hljs-built_in {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .language-css .hljs-keyword {
-		color: #d08770;
+		color: #d08770 !important;
 	}
 	.dark .language-diff .hljs-meta {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	.dark .language-ebnf .hljs-attribute {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	.dark .language-glsl .hljs-built_in {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .language-groovy .hljs-meta:not(:first-child) {
-		color: #d08770;
+		color: #d08770 !important;
 	}
 	.dark .language-haxe .hljs-meta {
-		color: #d08770;
+		color: #d08770 !important;
 	}
 	.dark .language-java .hljs-meta {
-		color: #d08770;
+		color: #d08770 !important;
 	}
 	.dark .language-ldif .hljs-attribute {
-		color: #8fbcbb;
+		color: #8fbcbb !important;
 	}
 	.dark .language-lisp .hljs-name {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .language-lua .hljs-built_in {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .language-moonscript .hljs-built_in {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .language-nginx .hljs-attribute {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .language-nginx .hljs-section {
-		color: #5e81ac;
+		color: #5e81ac !important;
 	}
 	.dark .language-pf .hljs-built_in {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .language-processing .hljs-built_in {
-		color: #88c0d0;
+		color: #88c0d0 !important;
 	}
 	.dark .language-scss .hljs-keyword {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	.dark .language-stylus .hljs-keyword {
-		color: #81a1c1;
+		color: #81a1c1 !important;
 	}
 	.dark .language-swift .hljs-meta {
-		color: #d08770;
+		color: #d08770 !important;
 	}
 	.dark .language-vim .hljs-built_in {
-		color: #88c0d0;
-		font-style: italic;
+		color: #88c0d0 !important;
+		font-style: italic !important;
 	}
 	.dark .language-yaml .hljs-meta {
-		color: #d08770;
+		color: #d08770 !important;
 	}
-
 	.hljs {
 		color: #24292e;
 		background: #ffffff;