Upgrade queries/schemas, smoother barchart (#4046)

- **feat(app2): sexier sidebar**
- **fix(app2): tweak number animation**
- **fix(app2): packet-trace height type**
- **feat(app2): improve transfer chart hover**
- **fix(barchart): use option**
- **fix(app2): update stats queries to v2**
- **fix(app2): remove total transfers for user**
- **fix(app2): update graphql schema**

Author: cor

app2/src/generated/graphql-env.d.ts

@@ -1,5 +1,4 @@
 import SharpTransferIcon from "$lib/components/icons/SharpTransferIcon.svelte"
-import SharpListIcon from "$lib/components/icons/SharpListIcon.svelte"
 import SharpDashboardIcon from "$lib/components/icons/SharpDashboardIcon.svelte"
 import SharpStakeIcon from "$lib/components/icons/SharpStakeIcon.svelte"
 import SharpChannelsIcon from "$lib/components/icons/SharpChannelsIcon.svelte"
@@ -29,12 +28,17 @@ export const navigation: Array<NavSection> = [
       {
         path: "/transfer",
         title: "Transfer",
-        icon: SharpTransferIcon
-      },
-      {
-        path: "/transfers",
-        title: "Your Transfers",
-        icon: SharpListIcon
+        icon: OutlineControlPointDuplicate,
+        subroutes: [
+          {
+            path: "/transfers",
+            title: "History"
+          },
+          {
+            path: "/faucet",
+            title: "Faucet"
+          }
+        ]
       }
     ]
   },

app2/src/generated/schema.graphql

@@ -7,12 +7,13 @@ import type { FetchDecodeGraphqlError } from "$lib/utils/queries"
 import { onMount } from "svelte"
 
 type Props = {
-  data: Option.Option<Array<DailyTransfer>>
+  data: Option.Option<ReadonlyArray<DailyTransfer>>
   error: Option.Option<FetchDecodeGraphqlError>
   class?: string
+  onHoverChange?: (day: Option.Option<DailyTransfer>) => void
 }
 
-const { data, error, class: className = "" } = $props()
+const { data, error, class: className = "", onHoverChange = () => {} }: Props = $props()
 
 // Format large numbers with commas (used for chart tooltips)
 function formatNumber(num: string | number): string {
@@ -24,38 +25,40 @@ const reversedDailyTransfers = $derived(Option.isSome(data) ? [...data.value].re
 
 const maxCount = $derived(Option.isSome(data) ? Math.max(...data.value.map(d => d.count)) : 0)
 
-// Calculate nice round numbers for y-axis labels
-const yLabels = $derived(() => {
-  if (maxCount <= 0) return [0, 0, 0, 0, 0]
+// Track the currently hovered day for display
+let hoveredDay = $state<Option.Option<DailyTransfer>>(Option.none())
 
-  // Find a nice round maximum that's at least as large as maxCount
-  const magnitude = 10 ** Math.floor(Math.log10(maxCount))
-  const roundedMax = Math.ceil(maxCount / magnitude) * magnitude
-
-  // Create evenly spaced labels
-  return [
-    0,
-    Math.round(roundedMax / 4),
-    Math.round(roundedMax / 2),
-    Math.round((roundedMax * 3) / 4),
-    roundedMax
-  ]
+// Find the day with the highest count
+const highestDay = $derived.by(() => {
+  if (!Option.isSome(data) || data.value.length === 0) return Option.none()
+  return Option.some(
+    data.value.reduce((max, current) => (current.count > max.count ? current : max), data.value[0])
+  )
 })
 
+// The count to display (either hovered day or highest day)
+const displayCount = $derived(() =>
+  Option.isSome(hoveredDay)
+    ? hoveredDay.value.count
+    : Option.isSome(highestDay)
+      ? highestDay.value.count
+      : 0
+)
+const displayDate = $derived(() =>
+  Option.isSome(hoveredDay)
+    ? hoveredDay.value.day_date
+    : Option.isSome(highestDay)
+      ? highestDay.value.day_date
+      : ""
+)
+
 // Calculate bar heights as percentages
 const barHeights = $derived(
   reversedDailyTransfers.map(day => ({
     ...day,
     heightPercent: maxCount > 0 ? Math.max((day.count / maxCount) * 100, 1) : 1
   }))
 )
-
-// Get labels for x-axis (first, middle, last)
-const xAxisLabels = $derived(
-  reversedDailyTransfers.filter(
-    (_, i, arr) => i === 0 || i === Math.floor(arr.length / 2) || i === arr.length - 1
-  )
-)
 </script>
 
 {#if Option.isSome(data) && maxCount > 0}
@@ -70,17 +73,30 @@ const xAxisLabels = $derived(
 
     <!-- Bars -->
     <div class="absolute left-0 right-0 top-0 bottom-0 pt-1 px-4 pt-4">
-      <div class="flex h-full gap-[1px] sm:gap-[2px] md:gap-1 items-end">
+      <div class="flex h-full items-end">
         {#each barHeights as day, i}
-          <div class="flex flex-col flex-1 group size-full justify-end hover:opacity-100">
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div 
+            class="flex pr-1 flex-col flex-1 group size-full justify-end hover:opacity-100"
+            onmouseenter={() => {
+              hoveredDay = Option.some(day);
+              onHoverChange(Option.some(day));
+            }}
+            onmouseleave={() => {
+              hoveredDay = Option.none();
+              onHoverChange(Option.none());
+            }}
+          >
             <div class="w-full size-full flex items-end">
               <div 
-                class="relative w-full bg-white rounded-t bar animate-bar"
+                class="relative w-full bg-white bar animate-bar"
                 style="--final-height: {day.heightPercent}%; --delay: {i * 50}ms; min-height: 1px;"
               >
+                <!-- uncomment for tooltip
                 <div class="absolute pointer-events-none bottom-full mb-2 left-1/2 transform -translate-x-1/2 bg-zinc-950 border-zinc-900 border text-white dark:text-white px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10">
                   <div>{formatNumber(day.count)}</div> <DateTimeComponent value={day.day} showTime={false} />
                 </div>
+                !-->
               </div>
             </div>
           </div>

app2/src/lib/components/layout/Sidebar/navigation.ts

@@ -11,15 +11,14 @@ type Props = {
 }
 
 const { statistic, class: className = "" }: Props = $props()
-let displayValue = $state(0)
+let displayValue = $state(1000000)
 let isFirstLoad = $state(true)
 
 // Update displayValue whenever statistic.value changes
 $effect(() => {
   if (isFirstLoad) {
     // On first load, animate from 0 to the value
     onMount(() => {
-      displayValue = 0
       setTimeout(() => {
         displayValue = statistic.value
         isFirstLoad = false

app2/src/lib/components/model/BarChart.svelte

@@ -26,7 +26,7 @@ const classes = cn(
 <div
   class={classes}
   {...rest}
-  in:fade={{delay:200}}
+  in:fade={{delay:100}}
 >
   {@render children()}
 </div>

app2/src/lib/components/model/StatisticComponent.svelte

@@ -5,10 +5,10 @@ import { graphql } from "gql.tada"
 import { statistics, dailyTransfers } from "$lib/stores/statistics.svelte"
 
 export const statisticsQuery = createQueryGraphql({
-  schema: Schema.Struct({ v1_ibc_union_statistics: Statistics }),
+  schema: Schema.Struct({ v2_stats_count: Statistics }),
   document: graphql(`
       query StatsQuery @cached(ttl: 1) {
-        v1_ibc_union_statistics {
+        v2_stats_count {
           name
           value
         }
@@ -17,7 +17,7 @@ export const statisticsQuery = createQueryGraphql({
   variables: {},
   refetchInterval: "1 second",
   writeData: data => {
-    statistics.data = data.pipe(Option.map(d => d.v1_ibc_union_statistics))
+    statistics.data = data.pipe(Option.map(d => d.v2_stats_count))
   },
   writeError: error => {
     statistics.error = error
@@ -26,19 +26,19 @@ export const statisticsQuery = createQueryGraphql({
 
 export const dailyTransfersQuery = (limit = 30) =>
   createQueryGraphql({
-    schema: Schema.Struct({ v1_ibc_union_daily_fungible_asset_orders: DailyTransfers }),
+    schema: Schema.Struct({ v2_stats_transfers_daily_count: DailyTransfers }),
     document: graphql(`
       query TransfersPerDay($limit: Int!) @cached(ttl: 60) {
-        v1_ibc_union_daily_fungible_asset_orders(limit: $limit, order_by: {day: desc}) {
+        v2_stats_transfers_daily_count(args: { p_days_back: $limit }) {
           count
-          day
+          day_date
         }
       }
     `),
     variables: { limit },
     refetchInterval: "60 seconds",
     writeData: data => {
-      dailyTransfers.data = data.pipe(Option.map(d => d.v1_ibc_union_daily_fungible_asset_orders))
+      dailyTransfers.data = data.pipe(Option.map(d => d.v2_stats_transfers_daily_count))
     },
     writeError: error => {
       dailyTransfers.error = error

app2/src/lib/components/ui/Card.svelte

@@ -1,13 +1,14 @@
 import { Schema } from "effect"
 import { UniversalChainId } from "$lib/schema/chain"
 import { Hex } from "$lib/schema/hex"
+import { Height } from "./height.ts"
 
 export class PacketTrace extends Schema.Class<PacketTrace>("PacketTrace")({
   type: Schema.String,
   chain: Schema.Struct({
     universal_chain_id: UniversalChainId
   }),
-  height: Schema.OptionFromNullOr(Schema.Number),
+  height: Schema.OptionFromNullOr(Height),
   block_hash: Schema.OptionFromNullOr(Hex),
   timestamp: Schema.OptionFromNullOr(Schema.DateTimeUtc),
   transaction_hash: Schema.OptionFromNullOr(Hex)

app2/src/lib/queries/statistics.svelte.ts

@@ -2,7 +2,7 @@ import { Schema } from "effect"
 
 export const StatisticItem = Schema.Struct({
   name: Schema.String,
-  value: Schema.Int
+  value: Schema.NumberFromString
 })
 
 export type StatisticItem = Schema.Schema.Type<typeof StatisticItem>
@@ -11,8 +11,8 @@ export const Statistics = Schema.Array(StatisticItem)
 export type Statistics = Schema.Schema.Type<typeof Statistics>
 
 export const DailyTransfer = Schema.Struct({
-  day: Schema.DateTimeUtc,
-  count: Schema.Int
+  day_date: Schema.DateTimeUtc,
+  count: Schema.NumberFromString
 })
 
 export type DailyTransfer = Schema.Schema.Type<typeof DailyTransfer>

app2/src/lib/schema/packet-trace.ts

@@ -9,6 +9,32 @@ import ErrorComponent from "$lib/components/model/ErrorComponent.svelte"
 import Sections from "$lib/components/ui/Sections.svelte"
 import StatisticComponent from "$lib/components/model/StatisticComponent.svelte"
 import BarChart from "$lib/components/model/BarChart.svelte"
+import DateTimeComponent from "$lib/components/ui/DateTimeComponent.svelte"
+import type { DailyTransfer } from "$lib/schema/statistics"
+
+// State for tracking the currently hovered day
+let hoveredDay = $state<Option.Option<DailyTransfer>>(Option.none())
+
+// Find the day with the highest count
+const highestDay = $derived.by(() => {
+  if (!Option.isSome(dailyTransfers.data) || dailyTransfers.data.value.length === 0)
+    return Option.none()
+  return Option.some(
+    dailyTransfers.data.value.reduce(
+      (max, current) => (current.count > max.count ? current : max),
+      dailyTransfers.data.value[0]
+    )
+  )
+})
+
+// The count to display (either hovered day or highest day)
+const displayDay = $derived(
+  Option.isSome(hoveredDay)
+    ? hoveredDay.value
+    : Option.isSome(highestDay)
+      ? highestDay.value
+      : undefined
+)
 
 onMount(() => {
   statistics.runEffect(statisticsQuery)
@@ -43,12 +69,22 @@ onMount(() => {
 
   <!-- Daily Transfers Chart -->
   <Card class="h-80 relative" divided>
-    <div class="p-4 gap-4 absolute top-0 left-0 border-b-0">
-      <h2 class="text-2xl font-bold mb-1">Daily Transfers</h2>
-      <Label>Last 30 days of transfer activity</Label>
+    <div class="p-4 gap-4 absolute top-0 left-0 border-b-0 w-full z-10">
+      <div class="flex justify-between items-center">
+        {#if displayDay !== undefined}
+          <div>
+            <Label>{#if Option.isSome(hoveredDay)}<DateTimeComponent class="text-zinc-500" value={hoveredDay.value.day_date} showTime={false} />{:else}Daily Transfers{/if}</Label>
+            <div class="text-2xl font-bold mt-1">{displayDay.count.toLocaleString()}</div>
+          </div>
+        {/if}
+      </div>
     </div>
 
-    <BarChart data={dailyTransfers.data} error={dailyTransfers.error} />
+    <BarChart 
+      data={dailyTransfers.data} 
+      error={dailyTransfers.error} 
+      onHoverChange={(day) => hoveredDay = day}
+    />
   </Card>
 
 </Sections>