[IGNORE] Rebase from main

.github/workflows/go.yml

@@ -24,7 +24,7 @@ jobs:
           enable_go_cache: false
           enable_npm: false
       - name: golangci-lint
-        uses: golangci/golangci-lint-action@v9.2.1
+        uses: golangci/golangci-lint-action@v9.3.0
         with:
           # Required: the version of golangci-lint is required and must be specified without patch version: we always use the latest patch version.
           version: v2.12.2

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/client",
-  "version": "0.54.0-beta.10",
+  "version": "0.54.0",
   "description": "Functions as an API client or Data fetching Layer for interacting with a backend service",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -15,7 +15,7 @@
   "main": "dist/cjs/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@perses-dev/spec": "0.2.0-beta.6",
+    "@perses-dev/spec": "0.2.0",
     "zod": "^3.21.4"
   },
   "scripts": {

components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.54.0-beta.10",
+  "version": "0.54.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -34,8 +34,8 @@
     "@date-fns/tz": "^1.4.1",
     "@fontsource/inter": "^5.0.0",
     "@mui/x-date-pickers": "^7.23.1",
-    "@perses-dev/spec": "0.2.0-beta.6",
-    "@perses-dev/client": "0.54.0-beta.10",
+    "@perses-dev/spec": "0.2.0",
+    "@perses-dev/client": "0.54.0",
     "numbro": "^2.3.6",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.20.5",
@@ -49,7 +49,6 @@
     "notistack": "^3.0.2",
     "react-colorful": "^5.6.1",
     "react-error-boundary": "^3.1.4",
-    "react-hook-form": "^7.51.3",
     "react-virtuoso": "^4.12.2"
   },
   "devDependencies": {

components/src/EChart/index.ts

@@ -12,3 +12,4 @@
 // limitations under the License.
 
 export * from './EChart';
+export * from './timezone-formatter';

components/src/EChart/timezone-formatter.test.ts

@@ -0,0 +1,79 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { createTimezoneAwareAxisFormatter } from './timezone-formatter';
+
+// Mock formatWithTimeZone since it's from @perses-dev/components
+jest.mock('@perses-dev/components', () => ({
+  formatWithTimeZone: jest.fn((date: Date, format: string, timeZone: string) => {
+    // Simple mock that returns format pattern with timezone
+    return `${format}[${timeZone}]`;
+  }),
+}));
+
+describe('createTimezoneAwareAxisFormatter', () => {
+  const testTimestamp = 1640995200000; // 2022-01-01 00:00:00 UTC
+  const timeZone = 'America/New_York';
+
+  it('should format for ranges > 5 years with year format', () => {
+    const formatter = createTimezoneAwareAxisFormatter(6 * 365 * 24 * 60 * 60 * 1000, timeZone);
+    const result = formatter(testTimestamp);
+    expect(result).toBe('yyyy[America/New_York]');
+  });
+
+  it('should format for ranges > 6 months with month-year format', () => {
+    const formatter = createTimezoneAwareAxisFormatter(3 * 365 * 24 * 60 * 60 * 1000, timeZone);
+    const result = formatter(testTimestamp);
+    expect(result).toBe('MMM yyyy[America/New_York]');
+  });
+
+  it('should format for ranges between 10 days and 6 months with day-month format', () => {
+    const formatter = createTimezoneAwareAxisFormatter(30 * 24 * 60 * 60 * 1000, timeZone); // 30 days
+    const result = formatter(testTimestamp);
+    expect(result).toBe('dd.MM[America/New_York]');
+  });
+
+  it('should format for ranges between 2-10 days with day-month-time format', () => {
+    const formatter = createTimezoneAwareAxisFormatter(5 * 24 * 60 * 60 * 1000, timeZone); // 5 days
+    const result = formatter(testTimestamp);
+    expect(result).toBe('dd.MM HH:mm[America/New_York]');
+  });
+
+  it('should format for ranges <= 2 days with time format', () => {
+    const formatter = createTimezoneAwareAxisFormatter(6 * 60 * 60 * 1000, timeZone); // 6 hours
+    const result = formatter(testTimestamp);
+    expect(result).toBe('HH:mm[America/New_York]');
+  });
+
+  it('should handle different timezones', () => {
+    const formatter = createTimezoneAwareAxisFormatter(6 * 60 * 60 * 1000, 'Europe/Prague');
+    const result = formatter(testTimestamp);
+    expect(result).toBe('HH:mm[Europe/Prague]');
+  });
+
+  it('should handle edge case at exactly 5 years', () => {
+    const fiveYears = 5 * 365 * 24 * 60 * 60 * 1000;
+    const formatter = createTimezoneAwareAxisFormatter(fiveYears, timeZone);
+    const result = formatter(testTimestamp);
+    // Should use MMM yyyy format (not > 5 years)
+    expect(result).toBe('MMM yyyy[America/New_York]');
+  });
+
+  it('should handle edge case at exactly 2 days', () => {
+    const twoDays = 2 * 24 * 60 * 60 * 1000;
+    const formatter = createTimezoneAwareAxisFormatter(twoDays, timeZone);
+    const result = formatter(testTimestamp);
+    // Should use HH:mm format (not > 2 days)
+    expect(result).toBe('HH:mm[America/New_York]');
+  });
+});

components/src/EChart/timezone-formatter.ts

@@ -0,0 +1,50 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { formatWithTimeZone } from '@perses-dev/components';
+
+const DAY_MS = 1000 * 60 * 60 * 24;
+const MONTH_MS = DAY_MS * 30;
+const YEAR_MS = DAY_MS * 365;
+
+/**
+ * Creates a timezone-aware axis formatter function for different time ranges
+ */
+export function createTimezoneAwareAxisFormatter(rangeMs: number, timeZone: string) {
+  return function (value: number): string {
+    const timeStamp = new Date(Number(value));
+
+    // more than 5 years
+    if (rangeMs > YEAR_MS * 5) {
+      return formatWithTimeZone(timeStamp, 'yyyy', timeZone);
+    }
+
+    // more than 6 months
+    if (rangeMs > MONTH_MS * 6) {
+      return formatWithTimeZone(timeStamp, 'MMM yyyy', timeZone);
+    }
+
+    // more than 10 days
+    if (rangeMs > DAY_MS * 10) {
+      return formatWithTimeZone(timeStamp, 'dd.MM', timeZone);
+    }
+
+    // more than 2 days
+    if (rangeMs > DAY_MS * 2) {
+      return formatWithTimeZone(timeStamp, 'dd.MM HH:mm', timeZone);
+    }
+
+    // less or equal 2 days
+    return formatWithTimeZone(timeStamp, 'HH:mm', timeZone);
+  };
+}

components/src/LinksEditor/index.ts

@@ -11,5 +11,4 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export * from './LinksEditor';
 export * from './LinkEditorForm';

components/src/TimeSeriesTooltip/TimeChartTooltip.tsx

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { memo, MutableRefObject, useRef, useState } from 'react';
+import { memo, MutableRefObject, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { Box, Portal, Stack } from '@mui/material';
 import { ECharts as EChartsInstance } from 'echarts/core';
 import { TimeSeries } from '@perses-dev/spec';
@@ -57,26 +57,49 @@ export const TimeChartTooltip = memo(function TimeChartTooltip({
 }: TimeChartTooltipProps) {
   const [showAllSeries, setShowAllSeries] = useState(false);
   const transform = useRef<string | undefined>();
+  const tooltipElementRef = useRef<HTMLDivElement | null>(null);
 
   const mousePos = useMousePosition();
   const { height, width, ref: tooltipRef } = useResizeObserver();
 
   const isTooltipPinned = pinnedPos !== null && enablePinning;
 
+  // Stable callback — prevents the ResizeObserver from disconnecting/reconnecting on every render.
+  const setTooltipRef = useCallback(
+    (node: HTMLDivElement | null): void => {
+      tooltipElementRef.current = node;
+      tooltipRef(node);
+    },
+    [tooltipRef]
+  );
+
+  const containerElement = containerId ? document.querySelector(containerId) : undefined;
+
+  // Synchronously reposition after every render to prevent one-frame viewport overflow.
+  useLayoutEffect(() => {
+    if (mousePos === null) return;
+    const node = tooltipElementRef.current;
+    if (!node) return;
+    const rect = node.getBoundingClientRect();
+    if (rect.height === 0 || rect.width === 0) return;
+    const nextTransform = assembleTransform(mousePos, pinnedPos, rect.height, rect.width, containerElement);
+    if (nextTransform && nextTransform !== transform.current) {
+      transform.current = nextTransform;
+      node.style.transform = nextTransform;
+    }
+  });
+
   if (mousePos === null || mousePos.target === null || data === null) return null;
 
-  // Ensure user is hovering over a chart before checking for nearby series.
   if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;
 
   const chart = chartRef.current;
 
-  const containerElement = containerId ? document.querySelector(containerId) : undefined;
-  // if tooltip is attached to a container, set max height to the height of the container so tooltip does not get cut off
+  // Cap height to container so the tooltip is not cut off.
   const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
 
   transform.current = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);
 
-  // Get series nearby the cursor and pass into tooltip content children.
   const nearbySeries = getNearbySeriesData({
     mousePos,
     data,
@@ -96,7 +119,7 @@ export const TimeChartTooltip = memo(function TimeChartTooltip({
   return (
     <Portal container={containerElement}>
       <Box
-        ref={tooltipRef}
+        ref={setTooltipRef}
         sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)}
         style={{
           transform: transform.current,

components/src/TimeSeriesTooltip/TooltipContent.tsx

@@ -13,7 +13,7 @@
 
 import { ReactElement, useMemo } from 'react';
 import { Box } from '@mui/material';
-import { NearbySeriesArray } from './nearby-series';
+import { NearbySeriesArray } from './types';
 import { SeriesInfo } from './SeriesInfo';
 
 export interface TooltipContentProps {

components/src/TimeSeriesTooltip/TooltipHeader.tsx

@@ -16,7 +16,7 @@ import Pin from 'mdi-material-ui/Pin';
 import PinOutline from 'mdi-material-ui/PinOutline';
 import { memo, ReactElement } from 'react';
 import { useTimeZone } from '../context/TimeZoneProvider';
-import { NearbySeriesArray } from './nearby-series';
+import { NearbySeriesArray } from './types';
 import {
   TOOLTIP_BG_COLOR_FALLBACK,
   TOOLTIP_MAX_WIDTH,

components/src/TimeSeriesTooltip/index.ts

@@ -19,4 +19,5 @@ export * from './TooltipContent';
 export * from './TooltipHeader';
 export * from './nearby-series';
 export * from './tooltip-model';
+export * from './types';
 export * from './utils';