From 4d3c164bc069bf2a3dcb67456bc987a6c4f563bd Mon Sep 17 00:00:00 2001
From: Til Wegener <38760774+tilwegener@users.noreply.github.com>
Date: Tue, 19 Aug 2025 10:06:31 +0200
Subject: [PATCH] Fix UI size display and ingestion history graph (#50)

* fix: unify size display, improve graph interpolation & time readability

* fix display human-readable sizes in ingestion chart

* display human-readable sizes in ingestion chart

* fix: format code

* fix keep fallback for item.name
---
 .../ingestion-connectors/ImapConnector.ts        |  1 -
 .../custom/charts/IngestionHistoryChart.svelte   | 16 ++++++++++++----
 .../custom/charts/StorageBySourceChart.svelte    |  7 ++++++-
 .../lib/components/ui/chart/chart-tooltip.svelte |  4 ++--
 .../frontend/src/routes/dashboard/+page.svelte   |  2 +-
 .../dashboard/archived-emails/[id]/+page.svelte  |  4 +++-
 6 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/backend/src/services/ingestion-connectors/ImapConnector.ts b/packages/backend/src/services/ingestion-connectors/ImapConnector.ts
index 46cfed9..a097b5c 100644
--- a/packages/backend/src/services/ingestion-connectors/ImapConnector.ts
+++ b/packages/backend/src/services/ingestion-connectors/ImapConnector.ts
@@ -193,7 +193,6 @@ export class ImapConnector implements IEmailConnector {
 				// Initialize with last synced UID, not the maximum UID in mailbox
 				this.newMaxUids[mailboxPath] = lastUid || 0;
 
-
 				// Only fetch if the mailbox has messages, to avoid errors on empty mailboxes with some IMAP servers.
 				if (mailbox.exists > 0) {
 					const BATCH_SIZE = 250; // A configurable batch size
diff --git a/packages/frontend/src/lib/components/custom/charts/IngestionHistoryChart.svelte b/packages/frontend/src/lib/components/custom/charts/IngestionHistoryChart.svelte
index d0c36e9..ab0f19e 100644
--- a/packages/frontend/src/lib/components/custom/charts/IngestionHistoryChart.svelte
+++ b/packages/frontend/src/lib/components/custom/charts/IngestionHistoryChart.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as Chart from '$lib/components/ui/chart/index.js';
 	import { AreaChart } from 'layerchart';
-	import { curveCatmullRom } from 'd3-shape';
+	import { curveMonotoneX } from 'd3-shape';
 	import type { ChartConfig } from '$lib/components/ui/chart';
 
 	export let data: { date: Date; count: number }[];
@@ -39,16 +39,24 @@
 		props={{
 			xAxis: {
 				format: (d) =>
-					new Date(d).toLocaleDateString('en-US', {
+					new Date(d).toLocaleDateString(undefined, {
 						month: 'short',
 						day: 'numeric',
 					}),
 			},
-			area: { curve: curveCatmullRom },
+			area: { curve: curveMonotoneX },
 		}}
 	>
 		{#snippet tooltip()}
-			<Chart.Tooltip />
+			<Chart.Tooltip
+				labelFormatter={(value) =>
+					(value instanceof Date ? value : new Date(value)).toLocaleString(undefined, {
+						month: 'short',
+						day: 'numeric',
+						hour: '2-digit',
+						minute: '2-digit',
+					})}
+			/>
 		{/snippet}
 	</AreaChart>
 </Chart.Container>
diff --git a/packages/frontend/src/lib/components/custom/charts/StorageBySourceChart.svelte b/packages/frontend/src/lib/components/custom/charts/StorageBySourceChart.svelte
index 104f4d6..3e916c2 100644
--- a/packages/frontend/src/lib/components/custom/charts/StorageBySourceChart.svelte
+++ b/packages/frontend/src/lib/components/custom/charts/StorageBySourceChart.svelte
@@ -3,6 +3,7 @@
 	import { PieChart } from 'layerchart';
 	import type { IngestionSourceStats } from '@open-archiver/types';
 	import type { ChartConfig } from '$lib/components/ui/chart';
+	import { formatBytes } from '$lib/utils';
 
 	export let data: IngestionSourceStats[];
 
@@ -29,7 +30,11 @@
 		]}
 	>
 		{#snippet tooltip()}
-			<Chart.Tooltip></Chart.Tooltip>
+			<Chart.Tooltip>
+				{#snippet formatter({ value, item })}
+					{item.payload.name}: {formatBytes(value as number)}
+				{/snippet}
+			</Chart.Tooltip>
 		{/snippet}
 	</PieChart>
 </Chart.Container>
diff --git a/packages/frontend/src/lib/components/ui/chart/chart-tooltip.svelte b/packages/frontend/src/lib/components/ui/chart/chart-tooltip.svelte
index efef55c..775b993 100644
--- a/packages/frontend/src/lib/components/ui/chart/chart-tooltip.svelte
+++ b/packages/frontend/src/lib/components/ui/chart/chart-tooltip.svelte
@@ -105,10 +105,10 @@
 						indicator === "dot" && "items-center"
 					)}
 				>
-					{#if formatter && item.value !== undefined && item.name}
+					{#if formatter && item.value !== undefined}
 						{@render formatter({
 							value: item.value,
-							name: item.name,
+							name: item.name || '',
 							item,
 							index: i,
 							payload: tooltipCtx.payload,
diff --git a/packages/frontend/src/routes/dashboard/+page.svelte b/packages/frontend/src/routes/dashboard/+page.svelte
index 1d43fee..4c6853f 100644
--- a/packages/frontend/src/routes/dashboard/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/+page.svelte
@@ -111,7 +111,7 @@
 				<div class=" lg:col-span-1">
 					<Card.Root class="h-full">
 						<Card.Header>
-							<Card.Title>Storage by Ingestion Source (Bytes)</Card.Title>
+							<Card.Title>Storage by Ingestion Source</Card.Title>
 						</Card.Header>
 						<Card.Content class="h-full">
 							{#if data.ingestionSources && data.ingestionSources.length > 0}
diff --git a/packages/frontend/src/routes/dashboard/archived-emails/[id]/+page.svelte b/packages/frontend/src/routes/dashboard/archived-emails/[id]/+page.svelte
index 4fa2b23..dd80fbc 100644
--- a/packages/frontend/src/routes/dashboard/archived-emails/[id]/+page.svelte
+++ b/packages/frontend/src/routes/dashboard/archived-emails/[id]/+page.svelte
@@ -128,7 +128,9 @@
 											class="flex items-center justify-between rounded-md border p-2"
 										>
 											<span
-												>{attachment.filename} ({attachment.sizeBytes} bytes)</span
+												>{attachment.filename} ({formatBytes(
+													attachment.sizeBytes
+												)})</span
 											>
 											<Button
 												variant="outline"