From 863dcf9c6d295257cdcd3b9079f39ddc8f71cc80 Mon Sep 17 00:00:00 2001 From: graphieros Date: Wed, 15 Jul 2026 23:02:18 +0200 Subject: [PATCH 1/4] feat: persist timeline chart metric in URL --- app/components/Package/TimelineChart.vue | 22 +++++++++++-------- .../[[org]]/[packageName].vue | 2 ++ 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/app/components/Package/TimelineChart.vue b/app/components/Package/TimelineChart.vue index 575c3d3894..5d1cb7cf39 100644 --- a/app/components/Package/TimelineChart.vue +++ b/app/components/Package/TimelineChart.vue @@ -49,6 +49,7 @@ const props = defineProps<{ timelineEntries: TimelineVersion[] selectedVersion: string | null loading: boolean + permalink?: boolean }>() const { settings } = useSettings() @@ -186,16 +187,15 @@ const seriesDependencies = computed(() => { } }) -const activeTab = shallowRef('totalSize') - +const activeTab = usePermalink('metric', 'totalSize') const shouldPauseChartAnimations = shallowRef(true) const { start: startChartAnimationPauseTimer } = useTimeoutFn( () => { shouldPauseChartAnimations.value = false }, - 1000, - { immediate: false }, + 300, + { immediate: true }, ) function pauseChartAnimations() { @@ -859,7 +859,7 @@ const timelineMetricTabs = computed(() => [
@@ -1040,6 +1040,7 @@ const timelineMetricTabs = computed(() => [ :dataset="datasets.dependencySize" :config="stackbarConfig" :selected-x-index="indexSelection" + :style="{ opacity: shouldPauseChartAnimations ? 0 : 1, transition: 'opacity 0.15s' }" ref="chartRef" > @@ -1112,7 +1113,10 @@ const timelineMetricTabs = computed(() => [ @@ -1198,9 +1202,9 @@ const timelineMetricTabs = computed(() => [ animation: indeterminate 1.5s ease-in-out infinite; } -.loaded :deep(.vue-data-ui-component .serie_line_0 path), -.loaded :deep(.vdui-shape-circle), -.loaded :deep(.vue-ui-stackbar rect) { +.loading :deep(.vue-data-ui-component .serie_line_0 path), +.loading :deep(.vdui-shape-circle), +.loading :deep(.vue-ui-stackbar rect) { transition: none !important; animation: none !important; } diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue index bf4baca70c..9b38ca2762 100644 --- a/app/pages/package-timeline/[[org]]/[packageName].vue +++ b/app/pages/package-timeline/[[org]]/[packageName].vue @@ -12,6 +12,7 @@ import type { TimelineSizeCacheValue } from '~/utils/charts' definePageMeta({ name: 'timeline', path: '/package-timeline/:org?/:packageName/v/:version', + preserveScrollOnQuery: true, }) const { t } = useI18n() @@ -359,6 +360,7 @@ useSeoMeta({ :timelineEntries :selectedVersion :loading="sizesLoading" + permalink />
From 5f74bd2d55b592cc00874fc011f054c604523ad5 Mon Sep 17 00:00:00 2001 From: graphieros Date: Wed, 15 Jul 2026 23:41:42 +0200 Subject: [PATCH 2/4] fix: address CodeRabbit comments --- app/components/Package/TimelineChart.vue | 33 +++++++++++++++---- .../[[org]]/[packageName].vue | 1 - 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/app/components/Package/TimelineChart.vue b/app/components/Package/TimelineChart.vue index 5d1cb7cf39..5e8fccd573 100644 --- a/app/components/Package/TimelineChart.vue +++ b/app/components/Package/TimelineChart.vue @@ -49,7 +49,6 @@ const props = defineProps<{ timelineEntries: TimelineVersion[] selectedVersion: string | null loading: boolean - permalink?: boolean }>() const { settings } = useSettings() @@ -187,7 +186,26 @@ const seriesDependencies = computed(() => { } }) -const activeTab = usePermalink('metric', 'totalSize') +const timelineChartMetrics = new Set([ + 'totalSize', + 'dependencyCount', + 'dependencySize', +]) + +const activeTab = usePermalink('metric', 'totalSize', { + permanent: true, +}) + +watch( + activeTab, + value => { + if (!timelineChartMetrics.has(value)) { + activeTab.value = 'totalSize' + } + }, + { immediate: true }, +) + const shouldPauseChartAnimations = shallowRef(true) const { start: startChartAnimationPauseTimer } = useTimeoutFn( @@ -859,7 +877,7 @@ const timelineMetricTabs = computed(() => [
@@ -967,7 +985,7 @@ const timelineMetricTabs = computed(() => [ :markersNegative="getNegativeDatapointPlots(svg.data[0], svg.slicer.start)" :colors :gradientColors="E18E_GRADIENT_COLORS" - :pauseAnimations="shouldPauseChartAnimations" + :pauseAnimations="shouldPauseChartAnimations || loading" /> @@ -1040,7 +1058,10 @@ const timelineMetricTabs = computed(() => [ :dataset="datasets.dependencySize" :config="stackbarConfig" :selected-x-index="indexSelection" - :style="{ opacity: shouldPauseChartAnimations ? 0 : 1, transition: 'opacity 0.15s' }" + :style="{ + opacity: shouldPauseChartAnimations || loading ? 0 : 1, + transition: 'opacity 0.15s', + }" ref="chartRef" > @@ -1059,7 +1080,7 @@ const timelineMetricTabs = computed(() => [ " :activeVersionPlot="getActiveVersionDatapointBar(svg.data, svg.barWidth)" :colors - :pauseAnimations="shouldPauseChartAnimations" + :pauseAnimations="shouldPauseChartAnimations || loading" /> diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue index 9b38ca2762..62412e0e39 100644 --- a/app/pages/package-timeline/[[org]]/[packageName].vue +++ b/app/pages/package-timeline/[[org]]/[packageName].vue @@ -360,7 +360,6 @@ useSeoMeta({ :timelineEntries :selectedVersion :loading="sizesLoading" - permalink />
From 9a88430c350218a31b625c12dcaedb90b30d2747 Mon Sep 17 00:00:00 2001 From: graphieros Date: Fri, 17 Jul 2026 19:08:57 +0200 Subject: [PATCH 3/4] chore(deps): bump vue-data-ui from 3.22.6 to 3.22.12 --- package.json | 2 +- pnpm-lock.yaml | 10 +++++----- pnpm-workspace.yaml | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 1008cc5dea..5dcbd2067a 100644 --- a/package.json +++ b/package.json @@ -112,7 +112,7 @@ "vite-plugin-pwa": "1.3.0", "vite-plus": "catalog:vite-plus", "vue": "3.5.39", - "vue-data-ui": "3.22.6", + "vue-data-ui": "3.22.12", "vue-router": "5.1.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 030f29e63d..56ef1cb15d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -268,8 +268,8 @@ importers: specifier: 3.5.39 version: 3.5.39(typescript@6.0.3) vue-data-ui: - specifier: 3.22.6 - version: 3.22.6(vue@3.5.39) + specifier: 3.22.12 + version: 3.22.12(vue@3.5.39) vue-router: specifier: 5.1.0 version: 5.1.0(@voidzero-dev/vite-plus-core@0.2.2)(@vue/compiler-sfc@3.5.39)(esbuild@0.28.1)(rolldown@1.1.4)(rollup@4.62.2)(vue@3.5.39)(webpack@5.108.4) @@ -10660,8 +10660,8 @@ packages: vue-component-type-helpers@3.3.6: resolution: {integrity: sha512-FkljacAwJ9BUoSUdpFe3VDy0sGigNlTH9+2zcXUWmZOjN8swiCkl3t48wOJun0OsUd2cEIda1l04tsxMiKIIrQ==} - vue-data-ui@3.22.6: - resolution: {integrity: sha512-E4vdfKCAWB3zAFiheMeRFbWEK491oZGfH1yv5ZiEodSidApizOgp+82FJLFQ0DgviBD7HDRseN6WT5ANcl+oUQ==} + vue-data-ui@3.22.12: + resolution: {integrity: sha512-kt8PpMx07xIHWkmi6wOeYEOA6VHEfpn10UzJnek2EOCbr41GrFEMK6405uyRgFe5b6cvBnNwMdlfB0UI2soRgQ==} peerDependencies: jspdf: '>=3.0.1' vue: '>=3.3.0' @@ -22869,7 +22869,7 @@ snapshots: vue-component-type-helpers@3.3.6: {} - vue-data-ui@3.22.6(vue@3.5.39): + vue-data-ui@3.22.12(vue@3.5.39): dependencies: vue: 3.5.39(typescript@6.0.3) diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 2f955e02de..70acb25c49 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -42,7 +42,7 @@ ignoreDepScripts: true ignoreWorkspaceRootCheck: true minimumReleaseAgeExclude: - - vue-data-ui@3.22.6 + - vue-data-ui@3.22.6 || 3.22.12 overrides: '@types/node': 24.13.2 From 8dc7bf1c2dda913369df3abe191187c2f9729558 Mon Sep 17 00:00:00 2001 From: graphieros Date: Sun, 19 Jul 2026 17:10:30 +0200 Subject: [PATCH 4/4] chore: bump vue-data-ui from 3.22.12 to 3.22.13 --- package.json | 2 +- pnpm-lock.yaml | 10 +++++----- pnpm-workspace.yaml | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 5dcbd2067a..9b2463e59b 100644 --- a/package.json +++ b/package.json @@ -112,7 +112,7 @@ "vite-plugin-pwa": "1.3.0", "vite-plus": "catalog:vite-plus", "vue": "3.5.39", - "vue-data-ui": "3.22.12", + "vue-data-ui": "3.22.13", "vue-router": "5.1.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 56ef1cb15d..458e3deee5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -268,8 +268,8 @@ importers: specifier: 3.5.39 version: 3.5.39(typescript@6.0.3) vue-data-ui: - specifier: 3.22.12 - version: 3.22.12(vue@3.5.39) + specifier: 3.22.13 + version: 3.22.13(vue@3.5.39) vue-router: specifier: 5.1.0 version: 5.1.0(@voidzero-dev/vite-plus-core@0.2.2)(@vue/compiler-sfc@3.5.39)(esbuild@0.28.1)(rolldown@1.1.4)(rollup@4.62.2)(vue@3.5.39)(webpack@5.108.4) @@ -10660,8 +10660,8 @@ packages: vue-component-type-helpers@3.3.6: resolution: {integrity: sha512-FkljacAwJ9BUoSUdpFe3VDy0sGigNlTH9+2zcXUWmZOjN8swiCkl3t48wOJun0OsUd2cEIda1l04tsxMiKIIrQ==} - vue-data-ui@3.22.12: - resolution: {integrity: sha512-kt8PpMx07xIHWkmi6wOeYEOA6VHEfpn10UzJnek2EOCbr41GrFEMK6405uyRgFe5b6cvBnNwMdlfB0UI2soRgQ==} + vue-data-ui@3.22.13: + resolution: {integrity: sha512-NQeLKNUZQWw9DGQUEQPQo2kIcKV+Uap685DTUzydK6b+N4E6CByy/VepaNIScRbyUV1wFWe5aG3pnyyg32aN7g==} peerDependencies: jspdf: '>=3.0.1' vue: '>=3.3.0' @@ -22869,7 +22869,7 @@ snapshots: vue-component-type-helpers@3.3.6: {} - vue-data-ui@3.22.12(vue@3.5.39): + vue-data-ui@3.22.13(vue@3.5.39): dependencies: vue: 3.5.39(typescript@6.0.3) diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 70acb25c49..56573637be 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -42,7 +42,7 @@ ignoreDepScripts: true ignoreWorkspaceRootCheck: true minimumReleaseAgeExclude: - - vue-data-ui@3.22.6 || 3.22.12 + - vue-data-ui@3.22.13 overrides: '@types/node': 24.13.2