Merge branch 'main' into SIG-9416

srikanthccv · web-flow · commit adc767b0ce29 · 2025-11-08T13:13:21.000+05:30
diff --git a/deploy/docker-swarm/docker-compose.ha.yaml b/deploy/docker-swarm/docker-compose.ha.yaml
@@ -176,7 +176,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.100.0
+    image: signoz/signoz:v0.100.1
     command:
       - --config=/root/config/prometheus.yml
     ports:
diff --git a/deploy/docker-swarm/docker-compose.yaml b/deploy/docker-swarm/docker-compose.yaml
@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.100.0
+    image: signoz/signoz:v0.100.1
     command:
       - --config=/root/config/prometheus.yml
     ports:
diff --git a/deploy/docker/docker-compose.ha.yaml b/deploy/docker/docker-compose.ha.yaml
@@ -179,7 +179,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.100.0}
+    image: signoz/signoz:${VERSION:-v0.100.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
diff --git a/deploy/docker/docker-compose.yaml b/deploy/docker/docker-compose.yaml
@@ -111,7 +111,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.100.0}
+    image: signoz/signoz:${VERSION:-v0.100.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
diff --git a/frontend/src/container/GridCardLayout/styles.ts b/frontend/src/container/GridCardLayout/styles.ts
@@ -17,12 +17,6 @@ export const Card = styled(CardComponent)<CardProps>`
 		overflow: hidden;
 		border-radius: 3px;
 		border: 1px solid var(--bg-slate-500);
-		background: linear-gradient(
-				0deg,
-				rgba(171, 189, 255, 0) 0%,
-				rgba(171, 189, 255, 0) 100%
-			),
-			#0b0c0e;
 
 		${({ isDarkMode }): StyledCSS =>
 			!isDarkMode &&
diff --git a/frontend/src/container/QueryTable/QueryTable.tsx b/frontend/src/container/QueryTable/QueryTable.tsx
@@ -90,8 +90,9 @@ export function QueryTable({
 			column: any,
 			tableColumns: any,
 		): void => {
-			e.stopPropagation();
 			if (isQueryTypeBuilder && enableDrillDown) {
+				e.stopPropagation();
+
 				onClick({ x: e.clientX, y: e.clientY }, { record, column, tableColumns });
 			}
 		},
diff --git a/frontend/src/lib/uPlotLib/placement.ts b/frontend/src/lib/uPlotLib/placement.ts
@@ -16,8 +16,20 @@
 
 // https://tobyzerner.github.io/placement.js/dist/index.js
 
+/**
+ * Positions an element (tooltip/popover) relative to a reference element.
+ * Automatically flips to the opposite side if there's insufficient space.
+ *
+ * @param element - The HTMLElement to position
+ * @param reference - Reference element/Range or bounding rect
+ * @param side - Preferred side: 'top', 'bottom', 'left', 'right' (default: 'bottom')
+ * @param align - Alignment: 'start', 'center', 'end' (default: 'center')
+ * @param options - Optional bounds for constraining the element
+ *   - bound: Custom boundary rect/element
+ *   - followCursor: { x, y } - If provided, tooltip follows cursor with smart positioning
+ */
 export const placement = (function () {
-	const e = {
+	const AXIS_PROPS = {
 		size: ['height', 'width'],
 		clientSize: ['clientHeight', 'clientWidth'],
 		offsetSize: ['offsetHeight', 'offsetWidth'],
@@ -28,87 +40,241 @@ export const placement = (function () {
 		marginAfter: ['marginBottom', 'marginRight'],
 		scrollOffset: ['pageYOffset', 'pageXOffset'],
 	};
-	function t(e) {
-		return { top: e.top, bottom: e.bottom, left: e.left, right: e.right };
+
+	function extractRect(source) {
+		return {
+			top: source.top,
+			bottom: source.bottom,
+			left: source.left,
+			right: source.right,
+		};
 	}
-	return function (o, r, f, a, i) {
-		void 0 === f && (f = 'bottom'),
-			void 0 === a && (a = 'center'),
-			void 0 === i && (i = {}),
-			(r instanceof Element || r instanceof Range) &&
-				(r = t(r.getBoundingClientRect()));
-		const n = {
-			top: r.bottom,
-			bottom: r.top,
-			left: r.right,
-			right: r.left,
-			...r,
+
+	return function (element, reference, side, align, options) {
+		// Default parameters
+		void 0 === side && (side = 'bottom');
+		void 0 === align && (align = 'center');
+		void 0 === options && (options = {});
+
+		// Handle cursor following mode
+		if (options.followCursor) {
+			const cursorX = options.followCursor.x;
+			const cursorY = options.followCursor.y;
+			const offset = options.followCursor.offset || 10; // Default 10px offset from cursor
+
+			element.style.position = 'absolute';
+			element.style.maxWidth = '';
+			element.style.maxHeight = '';
+
+			const elementWidth = element.offsetWidth;
+			const elementHeight = element.offsetHeight;
+
+			// Use viewport bounds for cursor following (not chart bounds)
+			const viewportBounds = {
+				top: 0,
+				left: 0,
+				bottom: window.innerHeight,
+				right: window.innerWidth,
+			};
+
+			// Vertical positioning: follow cursor Y with offset, clamped to viewport
+			const topPosition = cursorY + offset;
+			const clampedTop = Math.max(
+				viewportBounds.top,
+				Math.min(topPosition, viewportBounds.bottom - elementHeight),
+			);
+			element.style.top = `${clampedTop}px`;
+			element.style.bottom = 'auto';
+
+			// Horizontal positioning: auto-detect left or right based on available space
+			const spaceOnRight = viewportBounds.right - cursorX;
+			const spaceOnLeft = cursorX - viewportBounds.left;
+
+			if (spaceOnRight >= elementWidth + offset) {
+				// Enough space on the right
+				element.style.left = `${cursorX + offset}px`;
+				element.style.right = 'auto';
+				element.dataset.side = 'right';
+			} else if (spaceOnLeft >= elementWidth + offset) {
+				// Not enough space on right, use left
+				element.style.left = `${cursorX - elementWidth - offset}px`;
+				element.style.right = 'auto';
+				element.dataset.side = 'left';
+			} else if (spaceOnRight > spaceOnLeft) {
+				// Not enough space on either side, pick the side with more space
+				const leftPos = cursorX + offset;
+				const clampedLeft = Math.max(
+					viewportBounds.left,
+					Math.min(leftPos, viewportBounds.right - elementWidth),
+				);
+				element.style.left = `${clampedLeft}px`;
+				element.style.right = 'auto';
+				element.dataset.side = 'right';
+			} else {
+				const leftPos = cursorX - elementWidth - offset;
+				const clampedLeft = Math.max(
+					viewportBounds.left,
+					Math.min(leftPos, viewportBounds.right - elementWidth),
+				);
+				element.style.left = `${clampedLeft}px`;
+				element.style.right = 'auto';
+				element.dataset.side = 'left';
+			}
+
+			element.dataset.align = 'cursor';
+			return; // Exit early, don't run normal positioning logic
+		}
+
+		// Normalize reference to rect object
+		(reference instanceof Element || reference instanceof Range) &&
+			(reference = extractRect(reference.getBoundingClientRect()));
+
+		// Create anchor rect with swapped opposite edges for positioning
+		const anchorRect = {
+			top: reference.bottom,
+			bottom: reference.top,
+			left: reference.right,
+			right: reference.left,
+			...reference,
 		};
-		const s = {
+
+		// Viewport bounds (can be overridden via options.bound)
+		const bounds = {
 			top: 0,
 			left: 0,
 			bottom: window.innerHeight,
 			right: window.innerWidth,
 		};
-		i.bound &&
-			((i.bound instanceof Element || i.bound instanceof Range) &&
-				(i.bound = t(i.bound.getBoundingClientRect())),
-			Object.assign(s, i.bound));
-		const l = getComputedStyle(o);
-		const m = {};
-		const b = {};
-		for (const g in e)
-			(m[g] = e[g][f === 'top' || f === 'bottom' ? 0 : 1]),
-				(b[g] = e[g][f === 'top' || f === 'bottom' ? 1 : 0]);
-		(o.style.position = 'absolute'),
-			(o.style.maxWidth = ''),
-			(o.style.maxHeight = '');
-		const d = parseInt(l[b.marginBefore]);
-		const c = parseInt(l[b.marginAfter]);
-		const u = d + c;
-		const p = s[b.after] - s[b.before] - u;
-		const h = parseInt(l[b.maxSize]);
-		(!h || p < h) && (o.style[b.maxSize] = `${p}px`);
-		const x = parseInt(l[m.marginBefore]) + parseInt(l[m.marginAfter]);
-		const y = n[m.before] - s[m.before] - x;
-		const z = s[m.after] - n[m.after] - x;
-		((f === m.before && o[m.offsetSize] > y) ||
-			(f === m.after && o[m.offsetSize] > z)) &&
-			(f = y > z ? m.before : m.after);
-		const S = f === m.before ? y : z;
-		const v = parseInt(l[m.maxSize]);
-		(!v || S < v) && (o.style[m.maxSize] = `${S}px`);
-		const w = window[m.scrollOffset];
-		const O = function (e) {
-			return Math.max(s[m.before], Math.min(e, s[m.after] - o[m.offsetSize] - x));
+
+		options.bound &&
+			((options.bound instanceof Element || options.bound instanceof Range) &&
+				(options.bound = extractRect(options.bound.getBoundingClientRect())),
+			Object.assign(bounds, options.bound));
+
+		const styles = getComputedStyle(element);
+		const isVertical = side === 'top' || side === 'bottom';
+
+		// Build axis property maps based on orientation
+		const mainAxis = {}; // Properties for the main positioning axis
+		const crossAxis = {}; // Properties for the perpendicular axis
+
+		for (const prop in AXIS_PROPS) {
+			mainAxis[prop] = AXIS_PROPS[prop][isVertical ? 0 : 1];
+			crossAxis[prop] = AXIS_PROPS[prop][isVertical ? 1 : 0];
+		}
+
+		// Reset element positioning
+		element.style.position = 'absolute';
+		element.style.maxWidth = '';
+		element.style.maxHeight = '';
+
+		// Cross-axis: calculate and apply max size constraint
+		const crossMarginBefore = parseInt(styles[crossAxis.marginBefore]);
+		const crossMarginAfter = parseInt(styles[crossAxis.marginAfter]);
+		const crossMarginTotal = crossMarginBefore + crossMarginAfter;
+		const crossAvailableSpace =
+			bounds[crossAxis.after] - bounds[crossAxis.before] - crossMarginTotal;
+		const crossMaxSize = parseInt(styles[crossAxis.maxSize]);
+
+		(!crossMaxSize || crossAvailableSpace < crossMaxSize) &&
+			(element.style[crossAxis.maxSize] = `${crossAvailableSpace}px`);
+
+		// Main-axis: calculate space on both sides
+		const mainMarginTotal =
+			parseInt(styles[mainAxis.marginBefore]) +
+			parseInt(styles[mainAxis.marginAfter]);
+		const spaceBefore =
+			anchorRect[mainAxis.before] - bounds[mainAxis.before] - mainMarginTotal;
+		const spaceAfter =
+			bounds[mainAxis.after] - anchorRect[mainAxis.after] - mainMarginTotal;
+
+		// Auto-flip to the side with more space if needed
+		((side === mainAxis.before && element[mainAxis.offsetSize] > spaceBefore) ||
+			(side === mainAxis.after && element[mainAxis.offsetSize] > spaceAfter)) &&
+			(side = spaceBefore > spaceAfter ? mainAxis.before : mainAxis.after);
+
+		// Apply main-axis max size constraint
+		const mainAvailableSpace =
+			side === mainAxis.before ? spaceBefore : spaceAfter;
+		const mainMaxSize = parseInt(styles[mainAxis.maxSize]);
+
+		(!mainMaxSize || mainAvailableSpace < mainMaxSize) &&
+			(element.style[mainAxis.maxSize] = `${mainAvailableSpace}px`);
+
+		// Position on main axis
+		const mainScrollOffset = window[mainAxis.scrollOffset];
+		const clampMainPosition = function (pos) {
+			return Math.max(
+				bounds[mainAxis.before],
+				Math.min(
+					pos,
+					bounds[mainAxis.after] - element[mainAxis.offsetSize] - mainMarginTotal,
+				),
+			);
 		};
-		f === m.before
-			? ((o.style[m.before] = `${w + O(n[m.before] - o[m.offsetSize] - x)}px`),
-			  (o.style[m.after] = 'auto'))
-			: ((o.style[m.before] = `${w + O(n[m.after])}px`),
-			  (o.style[m.after] = 'auto'));
-		const B = window[b.scrollOffset];
-		const I = function (e) {
-			return Math.max(s[b.before], Math.min(e, s[b.after] - o[b.offsetSize] - u));
+
+		side === mainAxis.before
+			? ((element.style[mainAxis.before] = `${
+					mainScrollOffset +
+					clampMainPosition(
+						anchorRect[mainAxis.before] -
+							element[mainAxis.offsetSize] -
+							mainMarginTotal,
+					)
+			  }px`),
+			  (element.style[mainAxis.after] = 'auto'))
+			: ((element.style[mainAxis.before] = `${
+					mainScrollOffset + clampMainPosition(anchorRect[mainAxis.after])
+			  }px`),
+			  (element.style[mainAxis.after] = 'auto'));
+
+		// Position on cross axis based on alignment
+		const crossScrollOffset = window[crossAxis.scrollOffset];
+		const clampCrossPosition = function (pos) {
+			return Math.max(
+				bounds[crossAxis.before],
+				Math.min(
+					pos,
+					bounds[crossAxis.after] - element[crossAxis.offsetSize] - crossMarginTotal,
+				),
+			);
 		};
-		switch (a) {
+
+		switch (align) {
 			case 'start':
-				(o.style[b.before] = `${B + I(n[b.before] - d)}px`),
-					(o.style[b.after] = 'auto');
+				(element.style[crossAxis.before] = `${
+					crossScrollOffset +
+					clampCrossPosition(anchorRect[crossAxis.before] - crossMarginBefore)
+				}px`),
+					(element.style[crossAxis.after] = 'auto');
 				break;
 			case 'end':
-				(o.style[b.before] = 'auto'),
-					(o.style[b.after] = `${
-						B + I(document.documentElement[b.clientSize] - n[b.after] - c)
+				(element.style[crossAxis.before] = 'auto'),
+					(element.style[crossAxis.after] = `${
+						crossScrollOffset +
+						clampCrossPosition(
+							document.documentElement[crossAxis.clientSize] -
+								anchorRect[crossAxis.after] -
+								crossMarginAfter,
+						)
 					}px`);
 				break;
 			default:
-				var H = n[b.after] - n[b.before];
-				(o.style[b.before] = `${
-					B + I(n[b.before] + H / 2 - o[b.offsetSize] / 2 - d)
+				// 'center'
+				var crossSize = anchorRect[crossAxis.after] - anchorRect[crossAxis.before];
+				(element.style[crossAxis.before] = `${
+					crossScrollOffset +
+					clampCrossPosition(
+						anchorRect[crossAxis.before] +
+							crossSize / 2 -
+							element[crossAxis.offsetSize] / 2 -
+							crossMarginBefore,
+					)
 				}px`),
-					(o.style[b.after] = 'auto');
+					(element.style[crossAxis.after] = 'auto');
 		}
-		(o.dataset.side = f), (o.dataset.align = a);
+
+		// Store final placement as data attributes
+		(element.dataset.side = side), (element.dataset.align = align);
 	};
 })();
diff --git a/frontend/src/lib/uPlotLib/plugins/onClickPlugin.ts b/frontend/src/lib/uPlotLib/plugins/onClickPlugin.ts
diff --git a/frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts b/frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
