From 8bddfb6e38905bee7d5ece1579d759ef11bcdc3b Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 5 Jul 2024 20:06:31 +0200
Subject: [PATCH] nit dataflow dark mode colors

---
 .../src/lib/components/graph/FlowGraph.svelte | 10 ++-
 .../svelvet/edges/views/Edges/EdgeText.svelte | 77 +++++++++----------
 2 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte
index 613d008383..04cd790bcd 100644
--- a/frontend/src/lib/components/graph/FlowGraph.svelte
+++ b/frontend/src/lib/components/graph/FlowGraph.svelte
@@ -185,7 +185,8 @@
 							id: `dep-${pid}-${$selectedId}`,
 							source: pid,
 							target: $selectedId!,
-							labelBgColor: 'white',
+							labelBgColor: darkMode ? '#999' : 'white',
+							edgeColor: darkMode ? 'white' : 'black',
 							arrow: false,
 							animate: true,
 							noHandle: true,
@@ -201,7 +202,8 @@
 							id: `dep-${pid}-${$selectedId}`,
 							source: $selectedId!,
 							target: pid,
-							labelBgColor: 'white',
+							labelBgColor: darkMode ? '#999' : 'white',
+							edgeColor: darkMode ? 'white' : 'black',
 							arrow: false,
 							animate: true,
 							noHandle: true,
@@ -770,9 +772,11 @@
 	onMount(() => {
 		onThemeChange()
 	})
+
+	let darkMode = false
 </script>
 
-<DarkModeObserver on:change={onThemeChange} />
+<DarkModeObserver bind:darkMode on:change={onThemeChange} />
 
 <!-- {JSON.stringify(flowModuleStates)} -->
 <div
diff --git a/frontend/src/lib/components/graph/svelvet/edges/views/Edges/EdgeText.svelte b/frontend/src/lib/components/graph/svelvet/edges/views/Edges/EdgeText.svelte
index 1630bf4df8..8e2021f6df 100644
--- a/frontend/src/lib/components/graph/svelvet/edges/views/Edges/EdgeText.svelte
+++ b/frontend/src/lib/components/graph/svelvet/edges/views/Edges/EdgeText.svelte
@@ -1,49 +1,48 @@
 <script lang="ts">
-  import type { EdgeTextProps } from './types';
+	import type { EdgeTextProps } from './types'
 
-  // destructuring props to pass into BaseEdge component
-  export let edgeTextProps: EdgeTextProps;
-  $: ({ label, labelBgColor, labelTextColor, centerX, centerY } =
-    edgeTextProps);
+	// destructuring props to pass into BaseEdge component
+	export let edgeTextProps: EdgeTextProps
+	$: ({ label, labelBgColor, labelTextColor, centerX, centerY } = edgeTextProps)
 
-  const shiftRectY: number = 7;
-  $: pxRatio = label.length < 3 ? 9 : 7;
+	const shiftRectY: number = 7
+	$: pxRatio = label.length < 3 ? 9 : 7
 
-  // determine the center point of the edge to be used in the EdgeText component
-  $: textCenterX = centerX;
-  $: textCenterY = centerY;
+	// determine the center point of the edge to be used in the EdgeText component
+	$: textCenterX = centerX
+	$: textCenterY = centerY
 
-  // determine width of rect to render based on label.length (removing spaces)
-  // pxRatio is an estimate of how many pixels 1 character might take up
-  // pxRatio not 100% accurate as font is not monospace
-  $: spaces = label.split(' ').length - 1;
-  $: newLength = label.length - spaces;
-  $: labelPx = newLength * pxRatio;
+	// determine width of rect to render based on label.length (removing spaces)
+	// pxRatio is an estimate of how many pixels 1 character might take up
+	// pxRatio not 100% accurate as font is not monospace
+	$: spaces = label.split(' ').length - 1
+	$: newLength = label.length - spaces
+	$: labelPx = newLength * pxRatio
 </script>
 
 {#if typeof label === 'undefined' || !label}
-  {null}
+	{null}
 {:else}
-  <g>
-    <rect
-      class="EdgeTextBg"
-      data-testid="edge-text-bg"
-      fill={labelBgColor ? labelBgColor : 'white'}
-      x={textCenterX - labelPx / 2}
-      y={textCenterY - shiftRectY}
-      width={labelPx}
-      height={16}
-    />
-    <text
-      class="EdgeText"
-      x={textCenterX}
-      y={textCenterY}
-      font-size="12px"
-      dominant-baseline="central"
-      text-anchor="middle"
-      fill={labelTextColor ? labelTextColor : 'black'}
-    >
-      {label}
-    </text>
-  </g>
+	<g>
+		<rect
+			class="EdgeTextBg"
+			data-testid="edge-text-bg"
+			fill={labelBgColor ? labelBgColor : 'white'}
+			x={textCenterX - labelPx / 2}
+			y={textCenterY - shiftRectY}
+			width={labelPx}
+			height={16}
+		/>
+		<text
+			class="EdgeText"
+			x={textCenterX}
+			y={textCenterY}
+			font-size="12px"
+			dominant-baseline="central"
+			text-anchor="middle"
+			fill={labelTextColor ? labelTextColor : 'black'}
+		>
+			{label}
+		</text>
+	</g>
 {/if}