From 0e1a20b8f3c818f4c49ea96c91eaace0249aad76 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Fri, 28 Mar 2025 23:58:00 +0800
Subject: [PATCH] fix(drizzle-duckdb-wasm): ui issue and coloring issue

---
 .../components/Memory/DecayTimeSettings.vue   |  4 +--
 .../src/components/Memory/VisualizeChart.vue  | 36 +++++++++++--------
 .../playground/src/pages/memory-decay.vue     | 13 +++----
 3 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/packages/drizzle-duckdb-wasm/playground/src/components/Memory/DecayTimeSettings.vue b/packages/drizzle-duckdb-wasm/playground/src/components/Memory/DecayTimeSettings.vue
index ed0d415b3..4db411acc 100644
--- a/packages/drizzle-duckdb-wasm/playground/src/components/Memory/DecayTimeSettings.vue
+++ b/packages/drizzle-duckdb-wasm/playground/src/components/Memory/DecayTimeSettings.vue
@@ -115,8 +115,8 @@ function jumpAhead(amount, unit) {
         class="rounded-lg px-4 py-2 font-medium transition-colors"
         @click="toggleTimeAcceleration"
       >
-        <div v-if="isTimeAccelerated" i-solar:play-bold />
-        <div v-else i-solar:pause-bold />
+        <div v-if="isTimeAccelerated" i-solar:pause-bold />
+        <div v-else i-solar:play-bold />
       </button>
 
       <button
diff --git a/packages/drizzle-duckdb-wasm/playground/src/components/Memory/VisualizeChart.vue b/packages/drizzle-duckdb-wasm/playground/src/components/Memory/VisualizeChart.vue
index c6042d50e..6b004a6fc 100644
--- a/packages/drizzle-duckdb-wasm/playground/src/components/Memory/VisualizeChart.vue
+++ b/packages/drizzle-duckdb-wasm/playground/src/components/Memory/VisualizeChart.vue
@@ -73,7 +73,7 @@ function renderChart() {
   const containerHeight = containerRect.height || 320
 
   // Set chart margins
-  const margin = { top: 20, right: 0, bottom: 20, left: 30 }
+  const margin = { top: 20, right: 0, bottom: 40, left: 50 }
   const width = containerWidth - margin.left - margin.right
   const height = containerHeight - margin.top - margin.bottom
 
@@ -228,7 +228,7 @@ function addAxesAndGrids(
           .tickFormat(() => ''), // Use a function that returns empty string
       )
       .selectAll('line')
-      .attr('stroke', '#e5e7eb')
+      .attr('stroke', 'red')
       .attr('stroke-opacity', 0.5)
 
     svg.append('g')
@@ -239,7 +239,7 @@ function addAxesAndGrids(
           .tickFormat(() => ''), // Use a function that returns empty string
       )
       .selectAll('line')
-      .attr('stroke', '#e5e7eb')
+      .attr('stroke', 'green')
       .attr('stroke-opacity', 0.5)
   }
   else {
@@ -252,7 +252,7 @@ function addAxesAndGrids(
           .tickFormat(() => ''), // Use a function that returns empty string
       )
       .selectAll('line')
-      .attr('stroke', '#434345')
+      .attr('stroke', 'yellow')
       .attr('stroke-opacity', 0.5)
 
     svg.append('g')
@@ -263,7 +263,7 @@ function addAxesAndGrids(
           .tickFormat(() => ''), // Use a function that returns empty string
       )
       .selectAll('line')
-      .attr('stroke', '#434345')
+      .attr('stroke', 'blue')
       .attr('stroke-opacity', 0.5)
   }
 
@@ -275,7 +275,7 @@ function addAxesAndGrids(
     .append('text')
     .attr('class', 'axis-label')
     .attr('x', width / 2)
-    .attr('y', 20)
+    .attr('y', 36)
     .attr('text-anchor', 'middle')
     .text('Time (days)')
     .attr('fill', 'currentColor')
@@ -286,7 +286,7 @@ function addAxesAndGrids(
     .append('text')
     .attr('class', 'axis-label')
     .attr('transform', 'rotate(-90)')
-    .attr('y', -10)
+    .attr('y', -36)
     .attr('x', -height / 2)
     .attr('text-anchor', 'middle')
     .text('Memory Strength')
@@ -359,7 +359,7 @@ function addDataLines(
   }
 }
 
-function addDataPoints(svg, dataPoints, xScale, yScale) {
+function addDataPoints(svg: d3.Selection<SVGGElement, unknown, null, undefined>, dataPoints: DataPoint[], xScale: d3.ScaleLinear<number, number>, yScale: d3.ScaleLinear<number, number>) {
   svg.selectAll('.point-with-retrievals')
     .data(dataPoints)
     .enter()
@@ -414,7 +414,7 @@ function addDataPoints(svg, dataPoints, xScale, yScale) {
     .text(d => Math.round(d.y))
 }
 
-function addHalfLifeIndicator(svg, halfLife, xScale, height) {
+function addHalfLifeIndicator(svg: d3.Selection<SVGGElement, unknown, null, undefined>, halfLife: number, xScale: d3.ScaleLinear<number, number>, height: number) {
   svg.append('line')
     .attr('class', 'half-life-line')
     .attr('x1', xScale(halfLife))
@@ -436,7 +436,7 @@ function addHalfLifeIndicator(svg, halfLife, xScale, height) {
     .text(`Half-life: ${halfLife.toFixed(1)} days`)
 }
 
-function addTitleAndLegends(svg, storyId, retrievals, ltmFactor, width) {
+function addTitleAndLegends(svg: d3.Selection<SVGGElement, unknown, null, undefined>, storyId: string, retrievals: number, ltmFactor: number, width: number) {
   // Add chart title
   let titleText = `Memory Decay for ${storyId} (${retrievals} retrievals)`
   if (props.longTermMemoryEnabled) {
@@ -494,7 +494,7 @@ function addTitleAndLegends(svg, storyId, retrievals, ltmFactor, width) {
     .text(d => d.label)
 }
 
-function addLTMIndicators(svg, retrievals, threshold, ltmFactor, width) {
+function addLTMIndicators(svg: d3.Selection<SVGGElement, unknown, null, undefined>, retrievals: number, threshold: number, ltmFactor: number, width: number) {
   if (retrievals > 0 && retrievals < threshold) {
     const progress = Math.round((retrievals / threshold) * 100)
     svg.append('g')
@@ -558,15 +558,20 @@ onUnmounted(() => {
   font-size: 12px;
 }
 
+:deep(.y-axis .tick text) {
+  transform: rotate(-90deg) translateY(-20px);
+}
+
 :deep(.x-axis path),
 :deep(.y-axis path),
 :deep(.x-axis line),
-:deep(.y-axis line) {
+:deep(.y-axis line),
+:deep(.domain) {
   stroke: #dce0e3;
 }
 
 :deep(.grid line) {
-  stroke: #2c2d2e;
+  stroke: #2e3032;
   stroke-opacity: 0.5;
 }
 
@@ -574,8 +579,9 @@ onUnmounted(() => {
   :deep(.x-axis path),
   :deep(.y-axis path),
   :deep(.x-axis line),
-  :deep(.y-axis line) {
-    stroke: #1f2831;
+  :deep(.y-axis line),
+  :deep(.domain) {
+    stroke: #2e3032;
   }
 }
 </style>
diff --git a/packages/drizzle-duckdb-wasm/playground/src/pages/memory-decay.vue b/packages/drizzle-duckdb-wasm/playground/src/pages/memory-decay.vue
index 40474a0af..3f718f5ed 100644
--- a/packages/drizzle-duckdb-wasm/playground/src/pages/memory-decay.vue
+++ b/packages/drizzle-duckdb-wasm/playground/src/pages/memory-decay.vue
@@ -223,7 +223,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="mx-auto max-w-7xl p-4">
+  <div class="mx-auto max-w-7xl">
     <!-- Loading state -->
     <div v-if="!isMigrated" class="py-8 text-center">
       <div class="mx-auto h-8 w-8 animate-spin border-4 border-blue-500 border-t-transparent rounded-full" />
@@ -340,11 +340,12 @@ onUnmounted(() => {
       />
 
       <!-- SQL Query Preview -->
-      <div class="max-w-screen-lg overflow-x-scroll rounded-lg bg-neutral-50 p-4 dark:bg-neutral-800">
-        <h2 class="mb-2 text-xl font-semibold">
-          Current SQL Query
-        </h2>
-        <pre class="overflow-x-auto rounded bg-neutral-800 p-4 text-sm text-neutral-200">{{ decayQuery }}</pre>
+      <div class="max-w-full rounded-xl bg-neutral-50 dark:bg-neutral-800">
+        <div class="overflow-x-scroll rounded bg-neutral-800 text-sm text-neutral-200" font-mono>
+          <pre whitespace-pre-wrap>
+            <code>{{ decayQuery }}</code>
+          </pre>
+        </div>
       </div>
     </div>
   </div>