nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

fix(drizzle-duckdb-wasm): ui issue and coloring issue

Browse Source
This commit is contained in:
Neko Ayaka
2025-03-28 23:58:00 +08:00
parent 0320e4eacf
commit 0e1a20b8f3
3 changed files with 30 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/drizzle-duckdb-wasm/playground/src/components/Memory/DecayTimeSettings.vue
+2 -2
View File
@@ -115,8 +115,8 @@ function jumpAhead(amount, unit) {
class="rounded-lg px-4 py-2 font-medium transition-colors" class="rounded-lg px-4 py-2 font-medium transition-colors"
@click="toggleTimeAcceleration" @click="toggleTimeAcceleration"
> >
<div v-if="isTimeAccelerated" i-solar:play-bold /> <div v-if="isTimeAccelerated" i-solar:pause-bold />
<div v-else i-solar:pause-bold /> <div v-else i-solar:play-bold />
</button> </button>
<button <button
packages/drizzle-duckdb-wasm/playground/src/components/Memory/VisualizeChart.vue
+21 -15
View File
@@ -73,7 +73,7 @@ function renderChart() {
const containerHeight = containerRect.height || 320 const containerHeight = containerRect.height || 320
// Set chart margins // 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 width = containerWidth - margin.left - margin.right
const height = containerHeight - margin.top - margin.bottom const height = containerHeight - margin.top - margin.bottom
@@ -228,7 +228,7 @@ function addAxesAndGrids(
.tickFormat(() => ''), // Use a function that returns empty string .tickFormat(() => ''), // Use a function that returns empty string
) )
.selectAll('line') .selectAll('line')
.attr('stroke', '#e5e7eb') .attr('stroke', 'red')
.attr('stroke-opacity', 0.5) .attr('stroke-opacity', 0.5)
svg.append('g') svg.append('g')
@@ -239,7 +239,7 @@ function addAxesAndGrids(
.tickFormat(() => ''), // Use a function that returns empty string .tickFormat(() => ''), // Use a function that returns empty string
) )
.selectAll('line') .selectAll('line')
.attr('stroke', '#e5e7eb') .attr('stroke', 'green')
.attr('stroke-opacity', 0.5) .attr('stroke-opacity', 0.5)
} }
else { else {
@@ -252,7 +252,7 @@ function addAxesAndGrids(
.tickFormat(() => ''), // Use a function that returns empty string .tickFormat(() => ''), // Use a function that returns empty string
) )
.selectAll('line') .selectAll('line')
.attr('stroke', '#434345') .attr('stroke', 'yellow')
.attr('stroke-opacity', 0.5) .attr('stroke-opacity', 0.5)
svg.append('g') svg.append('g')
@@ -263,7 +263,7 @@ function addAxesAndGrids(
.tickFormat(() => ''), // Use a function that returns empty string .tickFormat(() => ''), // Use a function that returns empty string
) )
.selectAll('line') .selectAll('line')
.attr('stroke', '#434345') .attr('stroke', 'blue')
.attr('stroke-opacity', 0.5) .attr('stroke-opacity', 0.5)
} }
@@ -275,7 +275,7 @@ function addAxesAndGrids(
.append('text') .append('text')
.attr('class', 'axis-label') .attr('class', 'axis-label')
.attr('x', width / 2) .attr('x', width / 2)
.attr('y', 20) .attr('y', 36)
.attr('text-anchor', 'middle') .attr('text-anchor', 'middle')
.text('Time (days)') .text('Time (days)')
.attr('fill', 'currentColor') .attr('fill', 'currentColor')
@@ -286,7 +286,7 @@ function addAxesAndGrids(
.append('text') .append('text')
.attr('class', 'axis-label') .attr('class', 'axis-label')
.attr('transform', 'rotate(-90)') .attr('transform', 'rotate(-90)')
.attr('y', -10) .attr('y', -36)
.attr('x', -height / 2) .attr('x', -height / 2)
.attr('text-anchor', 'middle') .attr('text-anchor', 'middle')
.text('Memory Strength') .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') svg.selectAll('.point-with-retrievals')
.data(dataPoints) .data(dataPoints)
.enter() .enter()
@@ -414,7 +414,7 @@ function addDataPoints(svg, dataPoints, xScale, yScale) {
.text(d => Math.round(d.y)) .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') svg.append('line')
.attr('class', 'half-life-line') .attr('class', 'half-life-line')
.attr('x1', xScale(halfLife)) .attr('x1', xScale(halfLife))
@@ -436,7 +436,7 @@ function addHalfLifeIndicator(svg, halfLife, xScale, height) {
.text(`Half-life: ${halfLife.toFixed(1)} days`) .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 // Add chart title
let titleText = `Memory Decay for ${storyId} (${retrievals} retrievals)` let titleText = `Memory Decay for ${storyId} (${retrievals} retrievals)`
if (props.longTermMemoryEnabled) { if (props.longTermMemoryEnabled) {
@@ -494,7 +494,7 @@ function addTitleAndLegends(svg, storyId, retrievals, ltmFactor, width) {
.text(d => d.label) .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) { if (retrievals > 0 && retrievals < threshold) {
const progress = Math.round((retrievals / threshold) * 100) const progress = Math.round((retrievals / threshold) * 100)
svg.append('g') svg.append('g')
@@ -558,15 +558,20 @@ onUnmounted(() => {
font-size: 12px; font-size: 12px;
} }
:deep(.y-axis .tick text) {
transform: rotate(-90deg) translateY(-20px);
}
:deep(.x-axis path), :deep(.x-axis path),
:deep(.y-axis path), :deep(.y-axis path),
:deep(.x-axis line), :deep(.x-axis line),
:deep(.y-axis line) { :deep(.y-axis line),
:deep(.domain) {
stroke: #dce0e3; stroke: #dce0e3;
} }
:deep(.grid line) { :deep(.grid line) {
stroke: #2c2d2e; stroke: #2e3032;
stroke-opacity: 0.5; stroke-opacity: 0.5;
} }
@@ -574,8 +579,9 @@ onUnmounted(() => {
:deep(.x-axis path), :deep(.x-axis path),
:deep(.y-axis path), :deep(.y-axis path),
:deep(.x-axis line), :deep(.x-axis line),
:deep(.y-axis line) { :deep(.y-axis line),
stroke: #1f2831; :deep(.domain) {
stroke: #2e3032;
} }
} }
</style> </style>
packages/drizzle-duckdb-wasm/playground/src/pages/memory-decay.vue
+7 -6
View File
@@ -223,7 +223,7 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<div class="mx-auto max-w-7xl p-4"> <div class="mx-auto max-w-7xl">
<!-- Loading state --> <!-- Loading state -->
<div v-if="!isMigrated" class="py-8 text-center"> <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" /> <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 --> <!-- SQL Query Preview -->
<div class="max-w-screen-lg overflow-x-scroll rounded-lg bg-neutral-50 p-4 dark:bg-neutral-800"> <div class="max-w-full rounded-xl bg-neutral-50 dark:bg-neutral-800">
<h2 class="mb-2 text-xl font-semibold"> <div class="overflow-x-scroll rounded bg-neutral-800 text-sm text-neutral-200" font-mono>
Current SQL Query <pre whitespace-pre-wrap>
</h2> <code>{{ decayQuery }}</code>
<pre class="overflow-x-auto rounded bg-neutral-800 p-4 text-sm text-neutral-200">{{ decayQuery }}</pre> </pre>
</div>
</div> </div>
</div> </div>
</div> </div>