Merge branch 'main' into issue_6021

.claude/opencode.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "https://opencode.ai/config.json",
-  "lsp": true,
-  "experimental": {
-    "disable_paste_summary": true
-  }
-}

.claude/rules/comments.md

@@ -7,6 +7,5 @@ Applies to everything in the repo — code, config, workflows.
 - **Rationale goes in prose, not source.** Why a version is pinned, why a job exists, how a subsystem fits together — that belongs in the README or the PR.
 - **Never remove pre-existing comments** when editing code. The bar above applies to comments you write, not comments already there.
 - **Never talk to the reviewer.** No comments about where a change came from, what was changed, or why the change is correct — that belongs in the PR description and is noise the moment it merges.
-- **Less is more.** When writing something intended for human consumption, (comment, commit message, reply to prompt) use as few words as possible. Pick every word meticulously to reduce the volume to a strict minimum. Be down to the point. Less is more.
 
 Language rules build on this one: [`go-comments`](go-comments.md), [`py-comments`](py-comments.md).

.claude/rules/go-contrib.md

@@ -1,16 +0,0 @@
----
-paths:
-  - "**/*.go"
----
-
-# Contribution guidelines
-
-- When making Go changes, always ensure they follow the contributing guildelines in [`docs/contributing/go/`](../../docs/contributing/go/).
-- Look for existing patterns in the codebase for any change before implementing the changes.
-- If any API contract is modified, generate the OpenAPI specs with `make gen-openapi-specs`.
-- Always keep the OpenAPI spec generated in a separate commit, so the whole commit can be dropped in case of conflicts during merge. Do not try to resolve conflict in generated files, instead just generate them again.
-- Avoid breaking function calls unncessarily into multilines for couple of arguments.
-- Try to keep most computational only logic in types package itself related to a domain type, use modules as the orchestraction layer cordinating different layers and all db queries in store layer. Check the serviceaccount modules for inspiration when confused.
-- When defining types, keep the structure of file to have any constants and variables first, then exported types and exported methods and then finally the unexported types and methods.
-- Never import types or other modules in migration files, duplicate the required type or method to keep migration free from changes.
-- Always run the gofmt tool for formating beforing commiting any changes.

.claude/rules/go-test.md

@@ -1,12 +0,0 @@
----
-paths:
-  - "**/*_test.go"
----
-
-# Go tests
-
-- **testify + table-driven.** Use `assert` / `require`; prefer table-driven cases. Tests live next to the source file.
-- **`require` vs `assert`.** `require` for anything the rest of the test cannot proceed without — setup, `require.NoError(t, err)`, nil/length checks before indexing or dereferencing. `assert` for the actual expectations, so one failed check still reports the rest.
-- **Mock with mockery.** When an interface needs mocking, list it in `.mockery.yml` and run `mockery`; never hand-write mocks. Generated mocks live in the source package's `<pkg>test` sibling (e.g. `resourcestest.NewMockAdapter(t)`).
-- **Table format.** Declare cases as `testCases := []struct{ name string; ... }` and iterate with `for _, testCase := range testCases { t.Run(testCase.name, ...) }` — the variables are named `testCases` / `testCase`. Case names are PascalCase segments joined by `_`, one segment per aspect (scenario, condition, expectation): `TimestampNotNullNoDefault`, `DropPrimaryKeyConstraint_AlterColumnNullable`, `ForeignKeyConstraint_DoesNotExist_SCreateAndDropConstraintTrue`.
-- **No hoisted test constants.** When goconst flags a repeated literal in a test, vary the fixture strings across cases instead of hoisting a constant — never introduce a shared const for test data. 

.claude/rules/pull-requests.md

@@ -2,10 +2,6 @@
 
 - **Follow the template** (`.github/pull_request_template.md`): fill in its headings (Description / Issues closed by this PR / Screenshots / Additional Information). Don't add sections the template doesn't have.
 - **Keep only the headings that apply.** Delete every heading that has nothing under it, along with its `<!--...-->` placeholder comment. The body must never contain an empty heading — if only Description applies, the body has exactly that one heading.
-- **Keep the description concise and human-readable.** A few non repetitive bullets saying what changed and why, for a reviewer skimming it — not a wall of text, not a restatement of the diff, not generated boilerplate and not the user agent conversation details.
+- **Keep the description concise and human-readable.** A few plain bullets saying what changed and why, for a reviewer skimming it — not a wall of text, not a restatement of the diff, not generated boilerplate.
 - **Reference issues with `Closes #issue-number`** under "Issues closed by this PR" so they auto-close on merge. This goes in the PR description only — never in commit messages.
-- **Breaking changes can be added in additional information section** if any.
 - **AI assistance in commits may optionally be disclosed with an `Assisted-by:` trailer** naming the model (e.g. `Assisted-by: Claude Opus 4.5`) — do NOT use a `Co-authored-by:` trailer for this.
-- **Keep the commit body short and human readable** focused on decision made if any. Commit body must not re-iterate the changes done, skip if title is sufficient in conveying the change.
-- **Use convensional commit format** for commits and PR title.
-- **Do not amend the commits once pushed.** Always create a new commit once changes are pushed to remote.

.github/CODEOWNERS

@@ -15,10 +15,6 @@
 .github @therealpandey
 go.mod @therealpandey
 
-# Security
-
-/SECURITY.md @therealpandey
-
 # Scaffold Owners
 
 /pkg/config/ @therealpandey

.gitignore

@@ -232,4 +232,3 @@ pyrightconfig.json
 # dev
 .dev/
 .claude/worktrees/
-.claude/settings.local.json

Makefile

@@ -81,13 +81,10 @@ devenv-clickhouse-clean: ## Clean all ClickHouse data from filesystem
 ##############################################################
 # go commands
 ##############################################################
-SIGNOZ_SQLSTORE_SQLITE_PATH ?= signoz.db
-SIGNOZ_APISERVER_ADDRESS    ?= 0.0.0.0:8080
-
 .PHONY: go-run-enterprise
 go-run-enterprise: ## Runs the enterprise go backend server
 	@SIGNOZ_INSTRUMENTATION_LOGS_LEVEL=debug \
-	SIGNOZ_SQLSTORE_SQLITE_PATH=$(SIGNOZ_SQLSTORE_SQLITE_PATH) \
+	SIGNOZ_SQLSTORE_SQLITE_PATH=signoz.db \
 	SIGNOZ_WEB_ENABLED=false \
 	SIGNOZ_TOKENIZER_JWT_SECRET=secret \
 	SIGNOZ_ALERTMANAGER_PROVIDER=signoz \
@@ -104,7 +101,7 @@ go-test: ## Runs go unit tests
 .PHONY: go-run-community
 go-run-community: ## Runs the community go backend server
 	@SIGNOZ_INSTRUMENTATION_LOGS_LEVEL=debug \
-	SIGNOZ_SQLSTORE_SQLITE_PATH=$(SIGNOZ_SQLSTORE_SQLITE_PATH) \
+	SIGNOZ_SQLSTORE_SQLITE_PATH=signoz.db \
 	SIGNOZ_WEB_ENABLED=false \
 	SIGNOZ_TOKENIZER_JWT_SECRET=secret \
 	SIGNOZ_ALERTMANAGER_PROVIDER=signoz \
@@ -114,28 +111,6 @@ go-run-community: ## Runs the community go backend server
 	go run -race \
 		$(GO_BUILD_CONTEXT_COMMUNITY)/*.go server
 
-.PHONY: go-stop
-go-stop: ## Stops the go backend server listening on SIGNOZ_APISERVER_ADDRESS, waiting for it to release every port it holds
-	@PORT=$(lastword $(subst :, ,$(SIGNOZ_APISERVER_ADDRESS))); \
-	PIDS=$$(lsof -ti tcp:$$PORT); \
-	if [ -z "$$PIDS" ]; then \
-		echo "No signoz server running on port $$PORT."; \
-		echo "If it's running on a different port, rerun as: make go-stop SIGNOZ_APISERVER_ADDRESS=host:port"; \
-		exit 0; \
-	fi; \
-	kill $$PIDS 2>/dev/null; \
-	for i in $$(seq 1 10); do \
-		alive=$$(for p in $$PIDS; do kill -0 $$p 2>/dev/null && echo $$p; done); \
-		[ -z "$$alive" ] && break; \
-		sleep 1; \
-	done; \
-	alive=$$(for p in $$PIDS; do kill -0 $$p 2>/dev/null && echo $$p; done); \
-	if [ -n "$$alive" ]; then \
-		echo "Graceful shutdown did not finish in 10s, sending SIGKILL to $$alive"; \
-		kill -9 $$alive 2>/dev/null; \
-	fi; \
-	echo "Stopped signoz server on port $$PORT (pid $$PIDS)"
-
 .PHONY: go-build-community $(GO_BUILD_ARCHS_COMMUNITY)
 go-build-community: ## Builds the go backend server for community
 go-build-community: $(GO_BUILD_ARCHS_COMMUNITY)
@@ -266,8 +241,3 @@ semconv-generate: ## Regenerate semantic-convention families for Go and TypeScri
 gen-mocks:
 	@echo ">> Generating mocks"
 	@mockery --config .mockery.yml
-
-.PHONY: gen-openapi-specs
-gen-openapi-specs:
-	@go run cmd/enterprise/*.go generate openapi
-	cd frontend && pnpm generate:api && cd -

SECURITY.md

@@ -1,26 +1,17 @@
 # Security Policy
 
-SigNoz is looking forward to working with security researchers across the world to keep SigNoz and our users safe. If you have found an issue in our systems/applications, please report it to us privately.
+SigNoz is looking forward to working with security researchers across the world to keep SigNoz and our users safe. If you have found an issue in our systems/applications, please reach out to us.
 
 ## Supported Versions
-
-We always recommend using the latest version of SigNoz to ensure you get all security updates.
+We always recommend using the latest version of SigNoz to ensure you get all security updates
 
 ## Reporting a Vulnerability
 
 If you believe you have found a security vulnerability within SigNoz, please let us know right away. We'll try and fix the problem as soon as possible.
 
-**Do not report vulnerabilities using public GitHub issues, discussions, or pull requests.**
+**Do not report vulnerabilities using public GitHub issues**. Instead, email <security@signoz.io> with a detailed account of the issue. Please submit one issue per email, this helps us triage vulnerabilities.
 
-Instead, report it privately through GitHub's private vulnerability reporting:
-
-1. Go to the [**Security** tab](https://github.com/SigNoz/signoz/security) of this repository.
-2. Click **Report a vulnerability**, or use [this link](https://github.com/SigNoz/signoz/security/advisories/new).
-3. Describe the issue with as much detail as you can — affected version, impact, and steps to reproduce help us triage faster. Please submit one report per vulnerability.
-
-This opens a private advisory visible only to you and the SigNoz maintainers. We'll respond there, keep you updated as we work on a fix, and coordinate disclosure. If the report is valid we'll credit you on the published advisory and request a CVE.
-
-If you're unable to use GitHub's private reporting, you can email <security@signoz.io> instead.
+Once we've received your email we'll keep you updated as we fix the vulnerability.
 
 ## Thanks
 

conf/example.yaml

@@ -138,18 +138,6 @@ sqlstore:
 
 ##################### APIServer #####################
 apiserver:
-  # The TCP address the API server listens on, in the form "host:port".
-  address: 0.0.0.0:8080
-  # Maximum duration for reading an entire request, including the body.
-  read_timeout: 60s
-  # Keep at 0; any value cuts off streaming endpoints (livetail, SSE, export_raw_data).
-  write_timeout: 0
-  # tls:
-  #   enabled: true
-  #   cert_file: /path/to/server.crt
-  #   key_file: /path/to/server.key
-  #   # Minimum TLS version: "1.2" or "1.3". Defaults to "1.2".
-  #   min_version: "1.2"
   timeout:
     # Default request timeout.
     default: 60s

docs/api/openapi.yml

@@ -8349,6 +8349,8 @@ components:
           $ref: '#/components/schemas/RuletypesAlertState'
         overallStateChanged:
           type: boolean
+        relatedAITracesLink:
+          type: string
         relatedLogsLink:
           type: string
         relatedTracesLink:
@@ -8392,6 +8394,8 @@ components:
             $ref: '#/components/schemas/Querybuildertypesv5Label'
           nullable: true
           type: array
+        relatedAITracesLink:
+          type: string
         relatedLogsLink:
           type: string
         relatedTracesLink:
@@ -8497,6 +8501,7 @@ components:
       - TRACES_BASED_ALERT
       - LOGS_BASED_ALERT
       - EXCEPTIONS_BASED_ALERT
+      - AI_TRACES_BASED_ALERT
       type: string
     RuletypesBasicRuleThreshold:
       properties:

docs/contributing/development.md

@@ -83,13 +83,7 @@ This command:
 
    You should see: `{"status":"ok"}`
 
-3. Stop it when you're done:
-   ```bash
-   make go-stop
-   ```
-
-> 💡 **Tip**: The API server runs at `http://localhost:8080/` by default. You can configure this using `apiserver.address` configuration option. See
-> [running more than one instance](#how-do-i-run-more-than-one-instance) if you need that for agentic testing.
+> 💡 **Tip**: The API server runs at `http://localhost:8080/` by default
 
 ### 4. Setting up the Frontend
 
@@ -125,36 +119,6 @@ To verify everything is working correctly:
 3. **Check Backend**: `curl http://localhost:8080/api/v1/health` (should return `{"status":"ok"}`)
 4. **Check Frontend**: Open `http://localhost:3301` in your browser
 
-## How do I run more than one instance?
-
-Handy when you keep several branches checked out as separate git worktrees. Every port
-and path below is read from the environment, so set them on the `make` call:
-
-```bash
-SIGNOZ_APISERVER_ADDRESS=0.0.0.0:8081 \
-SIGNOZ_SQLSTORE_SQLITE_PATH=/path/to/main/sqlite.db \
-SIGNOZ_INSTRUMENTATION_METRICS_READERS_PULL_EXPORTER_PROMETHEUS_PORT=9091 \
-make go-run-community
-```
-
-| Variable | Default | Why you'd change it |
-| --- | --- | --- |
-| `SIGNOZ_APISERVER_ADDRESS` | `0.0.0.0:8080` | Address the API server listens on |
-| `SIGNOZ_SQLSTORE_SQLITE_PATH` | `signoz.db` in worktree | To reuse same database |
-| `SIGNOZ_INSTRUMENTATION_METRICS_READERS_PULL_EXPORTER_PROMETHEUS_PORT` | `9090` | Bound by the Prometheus metrics exporter on startup |
-
-Point the frontend at whichever backend you want, in `frontend/.env`:
-
-```env
-VITE_FRONTEND_API_ENDPOINT=http://localhost:8081
-```
-
-Stop an instance using the address it was started on:
-
-```bash
-make go-stop SIGNOZ_APISERVER_ADDRESS=0.0.0.0:8081
-```
-
 ## How to send test data?
 
 You can now send telemetry data to your local SigNoz instance:

docs/contributing/go/service.md

@@ -191,7 +191,7 @@ A standalone service only has the `factory.Service` lifecycle i.e it does not se
         // ... dependencies ...
     ) user.Service {
         return &service{
-            settings: factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/modules/user"),
+            settings: factory.NewScopedProviderSettings(providerSettings, "go.signoz.io/pkg/modules/user"),
             // ... dependencies ...
             stopC:    make(chan struct{}),
         }

ee/query-service/app/server.go

@@ -3,29 +3,56 @@ package app
 import (
 	"context"
 	"fmt"
+	"net"
+	"net/http"
+	"slices"
+
+	"go.opentelemetry.io/contrib/instrumentation/github.com/gorilla/mux/otelmux"
+	"go.opentelemetry.io/otel/propagation"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+
+	"github.com/gorilla/handlers"
+
+	"github.com/rs/cors"
+	"github.com/soheilhy/cmux"
 
 	"github.com/SigNoz/signoz/ee/query-service/app/api"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	"github.com/SigNoz/signoz/pkg/signoz"
+	"github.com/SigNoz/signoz/pkg/web"
 
 	"log/slog"
 
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
+	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/query-service/app/clickhouseReader"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/app/opamp"
 	opAmpModel "github.com/SigNoz/signoz/pkg/query-service/app/opamp/model"
 	baseconst "github.com/SigNoz/signoz/pkg/query-service/constants"
+	"github.com/SigNoz/signoz/pkg/query-service/healthcheck"
+	"github.com/SigNoz/signoz/pkg/query-service/utils"
 )
 
-// Server runs auxiliary servers (opamp) alongside the signoz apiserver
+// Server runs HTTP, Mux and a grpc server
 type Server struct {
+	config signoz.Config
+	signoz *signoz.SigNoz
+
+	// public http router
+	httpConn     net.Listener
+	httpServer   *http.Server
+	httpHostPort string
+
 	opampServer *opamp.Server
 
 	// Usage manager
 	usageManager *usage.Manager
+
+	unavailableChannel chan healthcheck.Status
 }
 
 // NewServer creates and initializes Server
@@ -100,11 +127,57 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		return nil, err
 	}
 
-	// Register the legacy query-service routes on the apiserver router. The
-	// apiserver owns the HTTP server and applies the middleware chain at serve
-	// time, so these routes get the same treatment as the apiserver routes.
-	r := signoz.APIServer.Router()
-	am := middleware.NewAuthZ(signoz.Instrumentation.Logger(), signoz.Modules.OrgGetter, signoz.Authz)
+	s := &Server{
+		config:             config,
+		signoz:             signoz,
+		httpHostPort:       baseconst.HTTPHostPort,
+		unavailableChannel: make(chan healthcheck.Status),
+		usageManager:       usageManager,
+	}
+
+	httpServer, err := s.createPublicServer(apiHandler, signoz.Web)
+
+	if err != nil {
+		return nil, err
+	}
+
+	s.httpServer = httpServer
+
+	s.opampServer = opamp.InitializeServer(
+		&opAmpModel.AllAgents, agentConfMgr, signoz.Instrumentation,
+	)
+
+	return s, nil
+}
+
+// HealthCheckStatus returns health check status channel a client can subscribe to
+func (s Server) HealthCheckStatus() chan healthcheck.Status {
+	return s.unavailableChannel
+}
+
+func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*http.Server, error) {
+	r := baseapp.NewRouter()
+	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger(), s.signoz.Modules.OrgGetter, s.signoz.Authz)
+
+	r.Use(middleware.NewRecovery(s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(otelmux.Middleware(
+		"apiserver",
+		otelmux.WithMeterProvider(s.signoz.Instrumentation.MeterProvider()),
+		otelmux.WithTracerProvider(s.signoz.Instrumentation.TracerProvider()),
+		otelmux.WithPropagators(propagation.NewCompositeTextMapPropagator(propagation.Baggage{}, propagation.TraceContext{})),
+		otelmux.WithFilter(func(r *http.Request) bool {
+			return !slices.Contains([]string{"/api/v1/health"}, r.URL.Path)
+		}),
+	))
+	r.Use(middleware.NewIdentN(s.signoz.IdentNResolver, s.signoz.Sharder, s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(middleware.NewTimeout(s.signoz.Instrumentation.Logger(),
+		s.config.APIServer.Timeout.ExcludedRoutes,
+		s.config.APIServer.Timeout.Default,
+		s.config.APIServer.Timeout.Max,
+	).Wrap)
+	r.Use(middleware.NewResource(s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(middleware.NewAudit(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes, s.signoz.Auditor).Wrap)
+	r.Use(middleware.NewComment().Wrap)
 
 	apiHandler.RegisterRoutes(r, am)
 	apiHandler.RegisterLogsRoutes(r, am)
@@ -115,29 +188,107 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	apiHandler.RegisterThirdPartyApiRoutes(r, am)
 	apiHandler.RegisterTraceFunnelsRoutes(r, am)
 
-	s := &Server{
-		usageManager: usageManager,
+	err := s.signoz.APIServer.AddToRouter(r)
+	if err != nil {
+		return nil, err
 	}
 
-	s.opampServer = opamp.InitializeServer(
-		&opAmpModel.AllAgents, agentConfMgr, signoz.Instrumentation,
-	)
+	c := cors.New(cors.Options{
+		AllowedOrigins: []string{"*"},
+		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH", "OPTIONS"},
+		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control"},
+	})
 
-	return s, nil
+	handler := c.Handler(r)
+
+	handler = handlers.CompressHandler(handler)
+
+	err = web.AddToRouter(r)
+	if err != nil {
+		return nil, err
+	}
+
+	routePrefix := s.config.Global.ExternalPath()
+	if routePrefix != "" {
+		prefixed := http.StripPrefix(routePrefix, handler)
+		handler = http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
+			switch req.URL.Path {
+			case "/api/v1/health", "/api/v2/healthz", "/api/v2/readyz", "/api/v2/livez":
+				r.ServeHTTP(w, req)
+				return
+			}
+
+			prefixed.ServeHTTP(w, req)
+		})
+	}
+
+	return &http.Server{
+		Handler: handler,
+	}, nil
 }
 
-// Start starts the opamp websocket server. The HTTP API server is started by
-// the signoz registry.
-func (s *Server) Start(ctx context.Context) error {
-	slog.Info("Starting OpAmp Websocket server", "addr", baseconst.OpAmpWsEndpoint)
-	if err := s.opampServer.Start(baseconst.OpAmpWsEndpoint); err != nil {
+// initListeners initialises listeners of the server
+func (s *Server) initListeners() error {
+	// listen on public port
+	var err error
+	publicHostPort := s.httpHostPort
+	if publicHostPort == "" {
+		return fmt.Errorf("baseconst.HTTPHostPort is required")
+	}
+
+	s.httpConn, err = net.Listen("tcp", publicHostPort)
+	if err != nil {
 		return err
 	}
 
+	slog.Info(fmt.Sprintf("Query server started listening on %s...", s.httpHostPort))
+
+	return nil
+}
+
+// Start listening on http and private http port concurrently
+func (s *Server) Start(ctx context.Context) error {
+	err := s.initListeners()
+	if err != nil {
+		return err
+	}
+
+	var httpPort int
+	if port, err := utils.GetPort(s.httpConn.Addr()); err == nil {
+		httpPort = port
+	}
+
+	go func() {
+		slog.Info("Starting HTTP server", "port", httpPort, "addr", s.httpHostPort)
+
+		switch err := s.httpServer.Serve(s.httpConn); err {
+		case nil, http.ErrServerClosed, cmux.ErrListenerClosed:
+			// normal exit, nothing to do
+		default:
+			slog.Error("Could not start HTTP server", errors.Attr(err))
+		}
+		s.unavailableChannel <- healthcheck.Unavailable
+	}()
+
+	go func() {
+		slog.Info("Starting OpAmp Websocket server", "addr", baseconst.OpAmpWsEndpoint)
+		err := s.opampServer.Start(baseconst.OpAmpWsEndpoint)
+		if err != nil {
+			slog.Error("opamp ws server failed to start", errors.Attr(err))
+			s.unavailableChannel <- healthcheck.Unavailable
+		}
+	}()
+
 	return nil
 }
 
 func (s *Server) Stop(ctx context.Context) error {
+	if s.httpServer != nil {
+		if err := s.httpServer.Shutdown(ctx); err != nil {
+			return err
+		}
+	}
+
 	s.opampServer.Stop()
 
 	// stop usage manager

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -9610,6 +9610,10 @@ export interface RulestatehistorytypesGettableRuleStateHistoryDTO {
 	 * @type boolean
 	 */
 	overallStateChanged: boolean;
+	/**
+	 * @type string
+	 */
+	relatedAITracesLink?: string;
 	/**
 	 * @type string
 	 */
@@ -9658,6 +9662,10 @@ export interface RulestatehistorytypesGettableRuleStateHistoryContributorDTO {
 	 * @type array,null
 	 */
 	labels: Querybuildertypesv5LabelDTO[] | null;
+	/**
+	 * @type string
+	 */
+	relatedAITracesLink?: string;
 	/**
 	 * @type string
 	 */
@@ -9753,6 +9761,7 @@ export enum RuletypesAlertTypeDTO {
 	TRACES_BASED_ALERT = 'TRACES_BASED_ALERT',
 	LOGS_BASED_ALERT = 'LOGS_BASED_ALERT',
 	EXCEPTIONS_BASED_ALERT = 'EXCEPTIONS_BASED_ALERT',
+	AI_TRACES_BASED_ALERT = 'AI_TRACES_BASED_ALERT',
 }
 export enum RuletypesMatchTypeDTO {
 	at_least_once = 'at_least_once',

frontend/src/constants/queryBuilder.ts

@@ -614,6 +614,18 @@ export const listViewInitialLogQuery: Query = {
 	},
 };
 
+export const PANEL_TYPES_INITIAL_QUERY: Record<PANEL_TYPES, Query> = {
+	[PANEL_TYPES.TIME_SERIES]: initialQueriesMap.metrics,
+	[PANEL_TYPES.VALUE]: initialQueriesMap.metrics,
+	[PANEL_TYPES.TABLE]: initialQueriesMap.metrics,
+	[PANEL_TYPES.LIST]: listViewInitialLogQuery,
+	[PANEL_TYPES.TRACE]: initialQueriesMap.traces,
+	[PANEL_TYPES.BAR]: initialQueriesMap.metrics,
+	[PANEL_TYPES.PIE]: initialQueriesMap.metrics,
+	[PANEL_TYPES.HISTOGRAM]: initialQueriesMap.metrics,
+	[PANEL_TYPES.EMPTY_WIDGET]: initialQueriesMap.metrics,
+};
+
 export const listViewInitialTraceQuery: Query = {
 	// it should be the above commented query
 	...initialQueriesMap.traces,

frontend/src/container/LLMObservability/Explorer/Controls/Controls.module.scss

@@ -1,14 +0,0 @@
-.container {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 0.3rem;
-	margin: 8px 0;
-}
-
-.optionsTrigger {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	cursor: pointer;
-}

frontend/src/container/LLMObservability/Explorer/Controls/index.tsx

@@ -1,82 +0,0 @@
-import { memo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Settings } from '@signozhq/icons';
-import FieldsSelector from 'components/FieldsSelector';
-import Controls, { ControlsProps } from 'container/Controls';
-import { OptionsMenuConfig } from 'container/OptionsMenu/types';
-import useQueryPagination from 'hooks/queryPagination/useQueryPagination';
-import { DataSource } from 'types/common/queryBuilder';
-
-import styles from './Controls.module.scss';
-
-function TraceExplorerControls({
-	isLoading,
-	totalCount,
-	perPageOptions,
-	config,
-	showSizeChanger = true,
-}: TraceExplorerControlsProps): JSX.Element | null {
-	const { t } = useTranslation(['trace']);
-	const [isFieldsSelectorOpen, setIsFieldsSelectorOpen] = useState(false);
-
-	const {
-		pagination,
-		handleCountItemsPerPageChange,
-		handleNavigateNext,
-		handleNavigatePrevious,
-	} = useQueryPagination(totalCount, perPageOptions);
-
-	return (
-		<div className={styles.container}>
-			{config?.fieldsSelector && (
-				<>
-					<div
-						className={styles.optionsTrigger}
-						onClick={(): void => setIsFieldsSelectorOpen(true)}
-					>
-						{t('options_menu.options')}
-						<Settings size="md" />
-					</div>
-					<FieldsSelector
-						isOpen={isFieldsSelectorOpen}
-						title="Edit columns"
-						fields={config.fieldsSelector.value}
-						onFieldsChange={config.fieldsSelector.onFieldsChange}
-						onClose={(): void => setIsFieldsSelectorOpen(false)}
-						signal={DataSource.TRACES}
-					/>
-				</>
-			)}
-
-			<Controls
-				isLoading={isLoading}
-				totalCount={totalCount}
-				offset={pagination.offset}
-				countPerPage={pagination.limit}
-				perPageOptions={perPageOptions}
-				handleCountItemsPerPageChange={handleCountItemsPerPageChange}
-				handleNavigateNext={handleNavigateNext}
-				handleNavigatePrevious={handleNavigatePrevious}
-				showSizeChanger={showSizeChanger}
-			/>
-		</div>
-	);
-}
-
-TraceExplorerControls.defaultProps = {
-	config: null,
-};
-
-type TraceExplorerControlsProps = Pick<
-	ControlsProps,
-	'isLoading' | 'totalCount' | 'perPageOptions'
-> & {
-	config?: OptionsMenuConfig | null;
-	showSizeChanger?: boolean;
-};
-
-TraceExplorerControls.defaultProps = {
-	showSizeChanger: true,
-};
-
-export default memo(TraceExplorerControls);

frontend/src/container/LLMObservability/Explorer/ListView/utils.tsx

@@ -1,168 +0,0 @@
-import { Link } from 'react-router-dom';
-import type { TableColumnsType as ColumnsType } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import { TelemetryFieldKey } from 'api/v5/v5';
-import type { TracesTableRow } from '../TracesTable/getFieldColumn';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import ROUTES from 'constants/routes';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
-import { formUrlParams } from 'container/TraceDetail/utils';
-import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
-import { RowData } from 'lib/query/createTableColumnsFromQuery';
-import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
-import { ILog } from 'types/api/logs/log';
-import { QueryDataV3 } from 'types/api/widgets/getQuery';
-
-export function BlockLink({
-	children,
-	to,
-	openInNewTab,
-}: {
-	children: React.ReactNode;
-	to: string;
-	openInNewTab: boolean;
-}): any {
-	// Display block to make the whole cell clickable
-	return (
-		<Link
-			to={to}
-			style={{ display: 'block' }}
-			target={openInNewTab ? '_blank' : '_self'}
-		>
-			{children}
-		</Link>
-	);
-}
-
-export const transformDataWithDate = (
-	data: QueryDataV3[],
-): Omit<ILog, 'timestamp'>[] =>
-	data[0]?.list?.map(({ data, timestamp }) => ({ ...data, date: timestamp })) ||
-	[];
-
-export const getTraceLink = (record: Record<string, unknown>): string => {
-	function readId(value: unknown): string {
-		if (typeof value === 'string' || typeof value === 'number') {
-			return String(value);
-		}
-		return '';
-	}
-
-	const traceId = readId(record.traceID) || readId(record.trace_id);
-	const spanId = readId(record.spanID) || readId(record.span_id);
-
-	return `${ROUTES.TRACE}/${traceId}${formUrlParams({
-		spanId,
-		levelUp: 0,
-		levelDown: 0,
-	})}`;
-};
-
-export const getListColumns = (
-	selectedColumns: TelemetryFieldKey[],
-	formatTimezoneAdjustedTimestamp: (
-		input: TimestampInput,
-		format?: string,
-	) => string | number,
-): ColumnsType<RowData> => {
-	const initialColumns: ColumnsType<RowData> = [
-		{
-			dataIndex: 'date',
-			key: 'date',
-			title: 'Timestamp',
-			width: 145,
-			render: (value, item): JSX.Element => {
-				const date =
-					typeof value === 'string'
-						? formatTimezoneAdjustedTimestamp(
-								value,
-								DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							)
-						: formatTimezoneAdjustedTimestamp(
-								value / 1e6,
-								DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							);
-				return (
-					<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-						<Typography.Text>{date}</Typography.Text>
-					</BlockLink>
-				);
-			},
-		},
-	];
-
-	const columns: ColumnsType<RowData> =
-		selectedColumns.map((props) => {
-			const name = props?.name || (props as any)?.key;
-			const fieldContext = props?.fieldContext || (props as any)?.type;
-			return {
-				title: name,
-				dataIndex: name,
-				key: buildCompositeKey(name, fieldContext),
-				width: 145,
-				render: (value, item): JSX.Element => {
-					if (value === '') {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Typography data-testid={name}>N/A</Typography>
-							</BlockLink>
-						);
-					}
-
-					if (
-						name === 'httpMethod' ||
-						name === 'responseStatusCode' ||
-						name === 'response_status_code' ||
-						name === 'http_method'
-					) {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Badge data-testid={name} color="sakura" variant="outline">
-									{value}
-								</Badge>
-							</BlockLink>
-						);
-					}
-
-					if (name === 'durationNano' || name === 'duration_nano') {
-						return (
-							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Typography data-testid={name}>{getMs(value)}ms</Typography>
-							</BlockLink>
-						);
-					}
-
-					return (
-						<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-							<Typography data-testid={name}>
-								<LineClampedText text={value} lines={3} />
-							</Typography>
-						</BlockLink>
-					);
-				},
-				responsive: ['md'],
-			};
-		}) || [];
-
-	return [...initialColumns, ...columns];
-};
-
-// Reshapes the query-range list payload into table rows. `id` mirrors span_id so
-// TanStack sees genuine row changes on orderBy toggles instead of falling back to
-// positional ids; `timestamp` is lifted from the wrapping ListItem.
-export const transformSpanRows = (data: QueryDataV3[]): TracesTableRow[] => {
-	const list = data[0]?.list;
-	if (!list) {
-		return [];
-	}
-	return list.map((item) => {
-		const row = item.data as Record<string, unknown>;
-		return {
-			...row,
-			timestamp: item.timestamp,
-			id: row.span_id,
-		};
-	}) as TracesTableRow[];
-};

frontend/src/container/LLMObservability/Explorer/TraceLoading/TraceLoading.styles.scss

@@ -1,19 +0,0 @@
-.loading-traces {
-	padding: 24px 0;
-	height: 240px;
-
-	display: flex;
-	justify-content: center;
-	align-items: flex-start;
-
-	.loading-traces-content {
-		display: flex;
-		align-items: flex-start;
-		flex-direction: column;
-
-		.loading-gif {
-			height: 72px;
-			margin-left: -24px;
-		}
-	}
-}

frontend/src/container/LLMObservability/Explorer/TraceLoading/TraceLoading.tsx

@@ -1,22 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Typography } from '@signozhq/ui/typography';
-import { DataSource } from 'types/common/queryBuilder';
-
-import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
-
-import './TraceLoading.styles.scss';
-
-export function TracesLoading(): JSX.Element {
-	const { t } = useTranslation('common');
-	return (
-		<div className="loading-traces">
-			<div className="loading-traces-content">
-				<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
-
-				<Typography>
-					{t('pending_data_placeholder', { dataSource: DataSource.TRACES })}
-				</Typography>
-			</div>
-		</div>
-	);
-}

frontend/src/container/LLMObservability/Explorer/TracesTable/FieldCell.tsx

@@ -1,77 +0,0 @@
-import { generatePath, Link } from 'react-router-dom';
-import { Badge } from '@signozhq/ui/badge';
-import TanStackTable from 'components/TanStackTableView';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import ROUTES from 'constants/routes';
-import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
-import { useTimezone } from 'providers/Timezone';
-
-import {
-	DURATION_FIELD_NAMES,
-	STATUS_FIELD_NAMES,
-	TIMESTAMP_FIELD_NAMES,
-	TRACE_ID_FIELD_NAMES,
-} from './constants';
-import { stringifyCellValue } from './utils';
-
-type FieldCellProps = {
-	name: string;
-	value: unknown;
-};
-
-function FieldCell({ name, value }: FieldCellProps): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	if (TIMESTAMP_FIELD_NAMES.has(name)) {
-		const ts = value as string | number;
-		const formatted =
-			typeof ts === 'string'
-				? formatTimezoneAdjustedTimestamp(ts, DATE_TIME_FORMATS.ISO_DATETIME_MS)
-				: formatTimezoneAdjustedTimestamp(
-						ts / 1e6,
-						DATE_TIME_FORMATS.ISO_DATETIME_MS,
-					);
-		const text = String(formatted);
-		return <TanStackTable.Text title={text}>{text}</TanStackTable.Text>;
-	}
-
-	if (value === '' || value == null) {
-		return <TanStackTable.Text data-testid={name}>-</TanStackTable.Text>;
-	}
-
-	const text = stringifyCellValue(value);
-
-	if (TRACE_ID_FIELD_NAMES.has(name)) {
-		return (
-			<Link
-				to={generatePath(ROUTES.TRACE_DETAIL, { id: text })}
-				data-testid="trace-id"
-				onClick={(e): void => e.stopPropagation()}
-			>
-				{text}
-			</Link>
-		);
-	}
-
-	if (STATUS_FIELD_NAMES.has(name)) {
-		return (
-			<Badge data-testid={name} color="sakura" variant="outline">
-				{text}
-			</Badge>
-		);
-	}
-
-	if (DURATION_FIELD_NAMES.has(name)) {
-		return (
-			<TanStackTable.Text data-testid={name}>{getMs(text)}ms</TanStackTable.Text>
-		);
-	}
-
-	return (
-		<TanStackTable.Text data-testid={name} title={text}>
-			{text}
-		</TanStackTable.Text>
-	);
-}
-
-export default FieldCell;

frontend/src/container/LLMObservability/Explorer/TracesTable/TracesTable.module.scss

@@ -1,26 +0,0 @@
-.tableWrapper {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.tracesTable {
-	--tanstack-table-row-height: 54px;
-	--tanstack-table-header-height: 54px;
-
-	--tanstack-cell-padding-top-override: 5px;
-	--tanstack-cell-padding-bottom-override: 5px;
-	--tanstack-cell-padding-right-override: 15px;
-
-	--tanstack-cell-padding-left-override: 15px;
-	--tanstack-cell-header-padding-left-override: 5px;
-
-	--tanstack-cell-header-padding-left-first-column: 15px;
-
-	--tanstack-plain-body-line-clamp: 1;
-
-	--tanstack-table-cell-bg: var(--l2-background);
-	--tanstack-table-header-cell-bg: var(--l1-background-hover);
-	--tanstack-table-row-hover-bg: var(--l1-background-hover);
-}

frontend/src/container/LLMObservability/Explorer/TracesTable/TracesTable.tsx

@@ -1,116 +0,0 @@
-import { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
-import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import TanStackTable from 'components/TanStackTableView';
-import type {
-	CellTypographySize,
-	TableColumnDef,
-} from 'components/TanStackTableView/types';
-import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
-import NoLogs from 'container/NoLogs/NoLogs';
-import { TracesLoading } from '../TraceLoading/TraceLoading';
-import APIError from 'types/api/error';
-import { DataSource, PanelTypeKeys } from 'types/common/queryBuilder';
-import { getAbsoluteUrl } from 'utils/basePath';
-
-import type { TracesTableRow } from './getFieldColumn';
-import styles from './TracesTable.module.scss';
-
-export type TracesTableProps = {
-	data: TracesTableRow[];
-	columns: TableColumnDef<TracesTableRow>[];
-	columnStorageKey?: string;
-	respectColumnOrder?: boolean;
-	panelType: PanelTypeKeys;
-	/** Builds the trace-detail href for a row; drives row click + cmd/ctrl-click. */
-	getRowHref: (row: TracesTableRow) => string;
-	isLoading: boolean;
-	isFetching: boolean;
-	isError: boolean;
-	error: APIError | Error | null;
-	isFilterApplied: boolean;
-	onColumnOrderChange?: (cols: TableColumnDef<TracesTableRow>[]) => void;
-	onColumnRemove?: (columnId: string) => void;
-	cellTypographySize?: CellTypographySize;
-};
-
-function TracesTable({
-	data,
-	columns,
-	columnStorageKey,
-	respectColumnOrder = false,
-	panelType,
-	getRowHref,
-	isLoading,
-	isFetching,
-	isError,
-	error,
-	isFilterApplied,
-	onColumnOrderChange,
-	onColumnRemove,
-	cellTypographySize = 'medium',
-}: TracesTableProps): JSX.Element {
-	const history = useHistory();
-
-	const isDataAbsent =
-		!isLoading && !isFetching && !isError && data.length === 0;
-
-	const handleRowClick = useCallback(
-		(row: TracesTableRow): void => {
-			history.push(getRowHref(row));
-		},
-		[history, getRowHref],
-	);
-
-	const handleRowClickNewTab = useCallback(
-		(row: TracesTableRow): void => {
-			window.open(getAbsoluteUrl(getRowHref(row)), '_blank', 'noopener');
-		},
-		[getRowHref],
-	);
-
-	return (
-		<>
-			{isError && error && <ErrorInPlace error={error as APIError} />}
-
-			{(isLoading || (isFetching && data.length === 0)) && <TracesLoading />}
-
-			{isDataAbsent && !isFilterApplied && (
-				<NoLogs dataSource={DataSource.TRACES} />
-			)}
-
-			{isDataAbsent && isFilterApplied && (
-				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType={panelType} />
-			)}
-
-			{!isError && data.length !== 0 && (
-				<div className={styles.tableWrapper}>
-					<TanStackTable<TracesTableRow>
-						data={data}
-						columns={columns}
-						className={styles.tracesTable}
-						columnStorageKey={columnStorageKey}
-						respectColumnOrder={respectColumnOrder}
-						isLoading={isFetching}
-						cellTypographySize={cellTypographySize}
-						onColumnOrderChange={onColumnOrderChange}
-						onColumnRemove={onColumnRemove}
-						onRowClick={handleRowClick}
-						onRowClickNewTab={handleRowClickNewTab}
-						getRowTestId={(row): string => `traces-table-row-${row.id}`}
-					/>
-				</div>
-			)}
-		</>
-	);
-}
-
-TracesTable.defaultProps = {
-	columnStorageKey: undefined,
-	respectColumnOrder: false,
-	onColumnOrderChange: undefined,
-	onColumnRemove: undefined,
-	cellTypographySize: 'medium',
-};
-
-export default TracesTable;

frontend/src/container/LLMObservability/Explorer/TracesTable/constants.ts

@@ -1,18 +0,0 @@
-// Field-name allowlists that drive signal-specific cell rendering. Both legacy
-// camelCase and snake_case variants are listed because the API has shipped both.
-export const TIMESTAMP_FIELD_NAMES = new Set(['timestamp']);
-
-export const STATUS_FIELD_NAMES = new Set([
-	'httpMethod',
-	'http_method',
-	'http.method',
-	'http.request.method',
-	'responseStatusCode',
-	'response_status_code',
-	'http.status_code',
-	'http.response.status_code',
-]);
-
-export const DURATION_FIELD_NAMES = new Set(['durationNano', 'duration_nano']);
-
-export const TRACE_ID_FIELD_NAMES = new Set(['traceID', 'trace_id']);

frontend/src/container/LLMObservability/Explorer/TracesTable/getFieldColumn.tsx

@@ -1,26 +0,0 @@
-import { TelemetryFieldKey } from 'api/v5/v5';
-import type { TableColumnDef } from 'components/TanStackTableView/types';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-
-import { TIMESTAMP_FIELD_NAMES } from './constants';
-import FieldCell from './FieldCell';
-
-export type TracesTableRow = { id: string } & Record<string, unknown>;
-
-export function getFieldColumn(
-	field: TelemetryFieldKey,
-): TableColumnDef<TracesTableRow> {
-	const { name, fieldContext, fieldDataType } = field;
-	const isTimestamp = TIMESTAMP_FIELD_NAMES.has(name);
-
-	return {
-		id: buildCompositeKey(name, fieldContext, fieldDataType),
-		header: name,
-		accessorFn: (row): unknown => row[name],
-		enableMove: !isTimestamp,
-		enableRemove: !isTimestamp,
-		canBeHidden: !isTimestamp,
-		width: { min: 192 },
-		cell: ({ value }): JSX.Element => <FieldCell name={name} value={value} />,
-	};
-}

frontend/src/container/LLMObservability/Explorer/TracesTable/utils.ts

@@ -1,12 +0,0 @@
-export function stringifyCellValue(value: unknown): string {
-	if (value == null) {
-		return '';
-	}
-	if (typeof value === 'string') {
-		return value;
-	}
-	if (typeof value === 'number' || typeof value === 'boolean') {
-		return String(value);
-	}
-	return JSON.stringify(value);
-}

frontend/src/container/LLMObservability/Explorer/TracesView/configs.ts

@@ -1,6 +1,9 @@
 import { TelemetryFieldKey } from 'api/v5/v5';
 import type { TableColumnDef } from 'components/TanStackTableView/types';
-import { getFieldColumn, TracesTableRow } from '../TracesTable/getFieldColumn';
+import {
+	getFieldColumn,
+	TracesTableRow,
+} from 'container/TracesExplorer/TracesTable/getFieldColumn';
 import { DEFAULT_PER_PAGE_OPTIONS } from 'hooks/queryPagination';
 
 export const PER_PAGE_OPTIONS: number[] = [10, ...DEFAULT_PER_PAGE_OPTIONS];

frontend/src/container/LLMObservability/Explorer/aiActions.ts

@@ -1,235 +0,0 @@
-/**
- * AI Assistant page-action factories for the Traces Explorer.
- *
- * Mirrors the logs equivalents — each factory closes over live page
- * state/callbacks so `execute()` always operates on the current query, and
- * the page component instantiates them via `useMemo` + `usePageActions`.
- *
- * See `pages/LogsExplorer/aiActions.ts` for the rationale behind writing
- * BOTH `filters.items` and `filter.expression` and then re-using the same
- * URL parser shape via `redirectWithQueryBuilderData`.
- */
-
-import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
-import {
-	aiFilterToTagFilterItem,
-	FILTER_OP_ENUM,
-	FILTER_VALUE_DESCRIPTION,
-	FilterDeps,
-	replaceFirstQueryData,
-} from 'container/AIAssistant/pageActions/builderQueryHelpers';
-import {
-	ActionResult,
-	PageAction,
-} from 'container/AIAssistant/pageActions/types';
-import {
-	IBuilderQuery,
-	TagFilterItem,
-} from 'types/api/queryBuilder/queryBuilderData';
-
-interface AIFilter {
-	key: string;
-	op: string;
-	value: string;
-}
-
-interface RunQueryParams {
-	filters: AIFilter[];
-}
-
-interface AddFilterParams {
-	key: string;
-	op: string;
-	value: string;
-}
-
-type TracesView = 'list' | 'timeseries' | 'table' | 'trace';
-
-interface ChangeViewParams {
-	view: TracesView;
-}
-
-interface SaveViewParams {
-	name: string;
-}
-
-/**
- * Replace all active span filters and navigate to the updated query URL
- * (which makes the WHERE clause reflect the new filters and triggers a re-run).
- */
-export function tracesRunQueryAction(
-	deps: FilterDeps,
-): PageAction<RunQueryParams> {
-	return {
-		id: 'traces.runQuery',
-		description: 'Replace the active trace filters and re-run the query',
-		parameters: {
-			type: 'object',
-			properties: {
-				filters: {
-					type: 'array',
-					description: 'Replacement filter list',
-					items: {
-						type: 'object',
-						properties: {
-							key: {
-								type: 'string',
-								description: 'Attribute key, e.g. service.name, http.status_code',
-							},
-							op: {
-								type: 'string',
-								enum: [...FILTER_OP_ENUM],
-							},
-							value: {
-								type: 'string',
-								description: FILTER_VALUE_DESCRIPTION,
-							},
-						},
-						required: ['key', 'op', 'value'],
-					},
-				},
-			},
-			required: ['filters'],
-		},
-		autoApply: true,
-		execute: async ({ filters }): Promise<ActionResult> => {
-			const baseQuery = deps.currentQuery.builder.queryData[0];
-			if (!baseQuery) {
-				throw new Error('No active query found in Traces Explorer.');
-			}
-
-			const tagItems = filters.map(aiFilterToTagFilterItem);
-			const newFilters = { items: tagItems, op: 'AND' };
-			const updatedBuilderQuery: IBuilderQuery = {
-				...baseQuery,
-				filters: newFilters,
-				filter: convertFiltersToExpression(newFilters),
-			};
-
-			deps.handleSetQueryData(0, updatedBuilderQuery);
-			deps.redirectWithQueryBuilderData(
-				replaceFirstQueryData(deps.currentQuery, updatedBuilderQuery),
-			);
-
-			return {
-				summary: `Query updated with ${filters.length} filter(s) and re-run.`,
-			};
-		},
-		getContext: (): Record<string, unknown> => ({
-			filters:
-				deps.currentQuery.builder.queryData[0]?.filters?.items?.map(
-					(f: TagFilterItem) => ({
-						key: f.key?.key,
-						op: f.op,
-						value: f.value,
-					}),
-				) ?? [],
-		}),
-	};
-}
-
-/**
- * Append a single filter to the existing trace query and navigate to the
- * updated URL.
- */
-export function tracesAddFilterAction(
-	deps: FilterDeps,
-): PageAction<AddFilterParams> {
-	return {
-		id: 'traces.addFilter',
-		description: 'Add a single filter to the current trace query and re-run',
-		parameters: {
-			type: 'object',
-			properties: {
-				key: {
-					type: 'string',
-					description: 'Attribute key, e.g. service.name, http.status_code',
-				},
-				op: {
-					type: 'string',
-					enum: [...FILTER_OP_ENUM],
-				},
-				value: {
-					type: 'string',
-					description: FILTER_VALUE_DESCRIPTION,
-				},
-			},
-			required: ['key', 'op', 'value'],
-		},
-		autoApply: true,
-		execute: async ({ key, op, value }): Promise<ActionResult> => {
-			const baseQuery = deps.currentQuery.builder.queryData[0];
-			if (!baseQuery) {
-				throw new Error('No active query found in Traces Explorer.');
-			}
-
-			const existing = baseQuery.filters?.items ?? [];
-			const newItem = aiFilterToTagFilterItem({ key, op, value });
-			const newFilters = { items: [...existing, newItem], op: 'AND' };
-			const updatedBuilderQuery: IBuilderQuery = {
-				...baseQuery,
-				filters: newFilters,
-				filter: convertFiltersToExpression(newFilters),
-			};
-
-			deps.handleSetQueryData(0, updatedBuilderQuery);
-			deps.redirectWithQueryBuilderData(
-				replaceFirstQueryData(deps.currentQuery, updatedBuilderQuery),
-			);
-
-			return { summary: `Filter added: ${key} ${op} "${value}". Query re-run.` };
-		},
-	};
-}
-
-/**
- * Switch the traces explorer between list / timeseries / table / trace views.
- */
-export function tracesChangeViewAction(deps: {
-	onChangeView: (view: TracesView) => void;
-}): PageAction<ChangeViewParams> {
-	return {
-		id: 'traces.changeView',
-		description:
-			'Switch the Traces Explorer between list, timeseries, table, and trace views',
-		parameters: {
-			type: 'object',
-			properties: {
-				view: {
-					type: 'string',
-					enum: ['list', 'timeseries', 'table', 'trace'],
-					description: 'The panel view to switch to',
-				},
-			},
-			required: ['view'],
-		},
-		execute: async ({ view }): Promise<ActionResult> => {
-			deps.onChangeView(view);
-			return { summary: `Switched to the "${view}" view.` };
-		},
-	};
-}
-
-/**
- * Save the current trace query as a named view (stub — wires to real API
- * when available).
- */
-export function tracesSaveViewAction(deps: {
-	onSaveView: (name: string) => Promise<void>;
-}): PageAction<SaveViewParams> {
-	return {
-		id: 'traces.saveView',
-		description: 'Save the current trace query as a named view',
-		parameters: {
-			type: 'object',
-			properties: {
-				name: { type: 'string', description: 'Name for the saved view' },
-			},
-			required: ['name'],
-		},
-		execute: async ({ name }): Promise<ActionResult> => {
-			await deps.onSaveView(name);
-			return { summary: `View "${name}" saved.` };
-		},
-	};
-}

frontend/src/container/LLMObservability/ToolbarActions/LeftToolbarActions.tsx

@@ -1,132 +0,0 @@
-import {
-	ArrowUpToLine,
-	Atom,
-	Filter,
-	SquareMousePointer,
-	Terminal,
-	Binoculars,
-} from '@signozhq/icons';
-import { Button, Tooltip } from 'antd';
-import cx from 'classnames';
-import { ExplorerViews } from 'pages/LogsExplorer/utils';
-
-import './ToolbarActions.styles.scss';
-
-interface LeftToolbarActionsProps {
-	items: any;
-	selectedView: string;
-	onChangeSelectedView: (view: ExplorerViews) => void;
-	showFilter: boolean;
-	handleFilterVisibilityChange: () => void;
-}
-
-const activeTab = 'active-tab';
-
-export default function LeftToolbarActions({
-	items,
-	selectedView,
-	onChangeSelectedView,
-	showFilter,
-	handleFilterVisibilityChange,
-}: LeftToolbarActionsProps): JSX.Element {
-	const { clickhouse, list, timeseries, table, trace } = items;
-
-	return (
-		<div className="left-toolbar">
-			{!showFilter && (
-				<Tooltip title="Show Filters">
-					<Button onClick={handleFilterVisibilityChange} className="filter-btn">
-						<Filter size={12} />
-						<ArrowUpToLine size={12} style={{ transform: 'rotate(90deg)' }} />
-					</Button>
-				</Tooltip>
-			)}
-			<div className="left-toolbar-query-actions">
-				{list?.show && (
-					<Tooltip title="List View">
-						<Button
-							disabled={list.disabled}
-							className={cx(
-								'list-view-tab',
-								'explorer-view-option',
-								selectedView === list.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(list.key)}
-						>
-							<SquareMousePointer size={14} data-testid="search-view" />
-							List View
-						</Button>
-					</Tooltip>
-				)}
-
-				{trace?.show && (
-					<Tooltip title="Trace View">
-						<Button
-							disabled={trace.disabled}
-							className={cx(
-								'trace-view-tab',
-								'explorer-view-option',
-								selectedView === trace.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(trace.key)}
-						>
-							<SquareMousePointer size={14} data-testid="trace-view" />
-							Trace View
-						</Button>
-					</Tooltip>
-				)}
-
-				{timeseries?.show && (
-					<Tooltip title="Time Series">
-						<Button
-							disabled={timeseries.disabled}
-							className={cx(
-								'timeseries-view-tab',
-								'explorer-view-option',
-								selectedView === timeseries.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(timeseries.key)}
-						>
-							<Atom size={14} data-testid="query-builder-view" />
-							Time Series
-						</Button>
-					</Tooltip>
-				)}
-
-				{clickhouse?.show && (
-					<Tooltip title="Clickhouse">
-						<Button
-							disabled={clickhouse.disabled}
-							className={cx(
-								'clickhouse-view-tab',
-								'explorer-view-option',
-								selectedView === clickhouse.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(clickhouse.key)}
-						>
-							<Terminal size={14} data-testid="clickhouse-view" />
-							Clickhouse
-						</Button>
-					</Tooltip>
-				)}
-
-				{table?.show && (
-					<Tooltip title="Table">
-						<Button
-							disabled={table.disabled}
-							className={cx(
-								'table-view-tab',
-								'explorer-view-option',
-								selectedView === table.key ? activeTab : '',
-							)}
-							onClick={(): void => onChangeSelectedView(table.key)}
-						>
-							<Binoculars size={14} data-testid="query-builder-view-v2" />
-							Table
-						</Button>
-					</Tooltip>
-				)}
-			</div>
-		</div>
-	);
-}

frontend/src/container/LLMObservability/ToolbarActions/ToolbarActions.styles.scss

@@ -1,125 +0,0 @@
-.left-toolbar {
-	display: flex;
-	align-items: center;
-
-	.filter-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-shadow: none;
-		height: 32px;
-		margin-right: 12px;
-		border: 1px solid var(--l1-border);
-	}
-
-	.left-toolbar-query-actions {
-		display: flex;
-		border-radius: 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l1-background);
-		flex-direction: row;
-		border-bottom: none;
-		margin-bottom: -1px;
-
-		.prom-ql-icon {
-			height: 14px;
-			width: 14px;
-		}
-
-		.explorer-view-option {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-direction: row;
-			border: none;
-			padding: 9px;
-			box-shadow: none;
-			border-radius: 0px;
-			border-left: 1px solid var(--l1-border);
-			border-bottom: 1px solid var(--l1-border);
-
-			gap: 8px;
-
-			&.active-tab {
-				background-color: var(--primary-background);
-				border-bottom: 1px solid var(--primary-background);
-				color: var(--primary-foreground);
-
-				&:hover {
-					background-color: var(--primary-background) !important;
-				}
-			}
-
-			&:disabled {
-				background-color: var(--l3-background);
-				opacity: 0.6;
-			}
-
-			&:first-child {
-				border-left: 1px solid transparent;
-			}
-
-			&:hover {
-				background-color: transparent !important;
-				border-left: 1px solid transparent !important;
-				color: var(--l1-foreground);
-			}
-		}
-	}
-
-	.frequency-chart-view-controller {
-		display: flex;
-		align-items: center;
-		padding-left: 8px;
-		gap: 8px;
-	}
-}
-
-.right-toolbar {
-	display: flex;
-	align-items: center;
-	background-color: var(--bg-robin-600);
-}
-
-.right-actions {
-	display: flex;
-	align-items: center;
-}
-
-.loading-container {
-	display: flex;
-	gap: 8px;
-	align-items: center;
-
-	.loading-btn {
-		display: flex;
-		width: 32px;
-		height: 33px;
-		padding: 4px 10px;
-		justify-content: center;
-		align-items: center;
-		gap: 6px;
-		flex-shrink: 0;
-		border-radius: 2px;
-		background: var(--l3-background);
-		box-shadow: none;
-		border: none;
-	}
-
-	.cancel-run {
-		display: flex;
-		height: 33px;
-		padding: 4px 10px;
-		justify-content: center;
-		align-items: center;
-		gap: 6px;
-		flex: 1 0 0;
-		border-radius: 2px;
-		background: var(--danger-background);
-		border: none;
-	}
-	.cancel-run:hover {
-		background-color: var(--bg-cherry-400) !important;
-		color: var(--l1-foreground) !important;
-	}
-}

frontend/src/lib/uPlotV2/components/Legend/Legend.module.scss

@@ -1,250 +0,0 @@
-@use '../../../../styles/scrollbar' as *;
-
-.container {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
-	// Let the flex children shrink below their content height so the series list
-	// scrolls within the capped legend height instead of overflowing the wrapper
-	// (the default min-height:auto would block the shrink).
-	min-height: 0;
-}
-
-/* Toolbar */
-
-.toolbar {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: var(--spacing-5, 10px);
-	padding: 0 var(--spacing-4) var(--spacing-5, 10px);
-	flex-shrink: 0;
-
-	> * {
-		flex: 0 0 auto;
-		white-space: nowrap;
-	}
-}
-
-.status {
-	font-family: var(--font-mono);
-	font-size: var(--periscope-font-size-small);
-	color: var(--l3-foreground);
-}
-
-.searchContainer {
-	flex-shrink: 0;
-	width: 100%;
-	padding-right: var(--spacing-4);
-	padding-bottom: var(--spacing-5, 10px);
-}
-
-.searchInput {
-	font-size: var(--font-size-xs);
-}
-
-.searchIcon {
-	color: var(--l3-foreground);
-}
-
-/* Series list */
-
-.scroller {
-	// flex:1 + min-height:0 pins the scroller to the space left after the
-	// toolbar instead of growing to fit every row.
-	flex: 1;
-	min-height: 0;
-	height: 100%;
-	width: 100%;
-	padding-right: var(--spacing-2);
-	overflow-x: hidden;
-	overscroll-behavior: contain;
-
-	@include custom-scrollbar;
-}
-
-.gridItem {
-	// Or the item keeps its content width and the label never ellipsizes.
-	min-width: 0;
-	max-width: 100%;
-}
-
-.gridList {
-	min-width: 0;
-	display: grid;
-	grid-auto-flow: row;
-	// min() keeps the column inside a narrow panel, where a wider one would push
-	// the row's actions out of the clipped area.
-	grid-template-columns: repeat(
-		auto-fill,
-		minmax(min(var(--legend-item-width, 240px), 100%), 1fr)
-	);
-	gap: var(--spacing-1) var(--spacing-4);
-}
-
-.container.isRight .gridList {
-	grid-template-columns: 1fr;
-}
-
-.emptyState {
-	padding: var(--spacing-16) 0;
-	font-size: var(--font-size-xs);
-	color: var(--l3-foreground);
-	text-align: center;
-}
-
-/* Row */
-
-.row {
-	position: relative;
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	height: 28px;
-	padding: 0 var(--spacing-3) 0 var(--spacing-4);
-	box-sizing: border-box;
-	width: 100%;
-	max-width: 100%;
-	min-width: 0;
-	border-radius: var(--radius);
-	cursor: pointer;
-	transition: background 160ms linear;
-
-	&:hover,
-	&:focus-visible {
-		background: var(--l3-background);
-	}
-}
-
-.isFocused {
-	background: var(--l3-background);
-}
-
-.marker {
-	// Reads as a checkbox without being one: filled when shown, hollow when
-	// hidden, deliberately not a check glyph.
-	flex: 0 0 auto;
-	box-sizing: border-box;
-	position: relative;
-	// Above the actions, so a narrow row's chip never covers the series colour.
-	z-index: 4;
-	width: 12px;
-	height: 12px;
-	padding: 0;
-	appearance: none;
-	border-width: 1.5px;
-	border-style: solid;
-	border-radius: var(--radius);
-	cursor: pointer;
-	transition:
-		transform 200ms ease,
-		box-shadow 200ms ease,
-		background-color 160ms linear,
-		opacity 160ms linear;
-
-	&:hover {
-		transform: scale(1.2);
-		box-shadow: 0 0 0 2px
-			color-mix(in srgb, var(--l1-foreground) 30%, transparent);
-	}
-
-	&:active {
-		transform: scale(0.9);
-	}
-
-	&:disabled {
-		cursor: default;
-	}
-
-	&:disabled:hover {
-		transform: none;
-		box-shadow: none;
-	}
-}
-
-// Series names run long and have no spaces to break on, so they need both a
-// cap and a break rule or the tooltip becomes one panel-wide line.
-.rowTooltip {
-	max-width: 420px;
-	white-space: normal;
-	overflow-wrap: anywhere;
-}
-
-.label {
-	// Full remaining width: the actions overlay its tail rather than shortening
-	// it, so revealing them never reflows the row.
-	flex: 1 1 auto;
-	width: 100%;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	letter-spacing: -0.01em;
-	color: var(--l2-foreground);
-	user-select: none;
-}
-
-.isHidden .marker {
-	opacity: 0.45;
-}
-
-.isHidden .label {
-	color: var(--l3-foreground);
-	text-decoration: line-through;
-	text-decoration-thickness: 1px;
-}
-
-/* Row actions */
-
-.actions {
-	position: absolute;
-	top: var(--spacing-2);
-	right: var(--spacing-3);
-	z-index: 3;
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	padding-left: var(--spacing-5, 10px);
-	// Sits on the row's hover background and masks the label's tail behind it.
-	background: var(--l3-background);
-	box-shadow: -8px 0 8px var(--l3-background);
-	opacity: 0;
-	transform: translateX(10px);
-	pointer-events: none;
-	transition:
-		opacity 180ms cubic-bezier(0.08, 0.52, 0.52, 1),
-		transform 180ms cubic-bezier(0.08, 0.52, 0.52, 1);
-}
-
-// :focus-visible, not :focus-within — the latter also matches the click that
-// just toggled the series, leaving the actions stuck open.
-.row:hover .actions,
-.row:focus-visible .actions,
-.row:has(:focus-visible) .actions {
-	opacity: 1;
-	transform: translateX(0);
-	pointer-events: auto;
-}
-
-.actionTrigger {
-	display: inline-flex;
-}
-
-.actionButton {
-	--button-height: 20px;
-	--button-width: 20px;
-	--button-padding: 0;
-	--button-variant-ghost-color: var(--l3-foreground);
-	--button-variant-ghost-hover-color: var(--l1-foreground);
-
-	flex-shrink: 0;
-}
-
-.actionButton.isActive {
-	--button-variant-ghost-color: var(--accent-primary);
-	--button-variant-ghost-hover-color: var(--accent-primary-hover);
-}

frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss

@@ -0,0 +1,204 @@
+@use '../../../../styles/scrollbar' as *;
+
+.legend-search-container {
+	flex-shrink: 0;
+	width: 100%;
+	padding-right: 8px;
+
+	.legend-search-input {
+		font-size: 12px;
+	}
+}
+
+.legend-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 12px;
+	height: 100%;
+	width: 100%;
+	// Allow the flex children to shrink below their content height so the
+	// virtualized grid scrolls within the capped legend height instead of
+	// overflowing the wrapper (default min-height:auto would block the shrink).
+	min-height: 0;
+
+	&:has(.legend-item-focused) .legend-item {
+		opacity: 0.3;
+	}
+
+	&:has(.legend-item-focused) .legend-item.legend-item-focused {
+		opacity: 1;
+	}
+
+	.legend-empty-state {
+		font-size: 12px;
+		color: var(--l2-foreground);
+		text-align: center;
+		padding: 12px;
+		padding: 2rem 0;
+	}
+
+	.legend-virtuoso-container {
+		// flex:1 + min-height:0 pins the scroller to the space left after the
+		// search box (RIGHT legend) and lets it scroll instead of growing to fit
+		// every row — without this the grid overflows a BOTTOM legend's fixed height.
+		flex: 1;
+		min-height: 0;
+		height: 100%;
+		width: 100%;
+
+		.virtuoso-grid-list {
+			min-width: 0;
+			display: grid;
+			grid-auto-flow: row;
+			grid-template-columns: repeat(
+				auto-fill,
+				minmax(var(--legend-average-width, 240px), 1fr)
+			);
+			column-gap: 12px;
+		}
+
+		.virtuoso-grid-item {
+			min-width: 0;
+		}
+
+		&.legend-virtuoso-container-right {
+			.virtuoso-grid-list {
+				grid-template-columns: 1fr;
+			}
+		}
+
+		&.legend-virtuoso-container-single-row {
+			.virtuoso-grid-list {
+				grid-template-columns: repeat(
+					auto-fit,
+					minmax(var(--legend-average-width, 240px), max-content)
+				);
+				justify-content: center;
+			}
+		}
+
+		@include custom-scrollbar;
+	}
+}
+
+.legend-row {
+	padding: 4px 0;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 8px 16px;
+
+	&.legend-single-row {
+		justify-content: center;
+	}
+
+	&.legend-row-right {
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: flex-start;
+	}
+	&.legend-row-bottom {
+		flex-direction: row;
+	}
+}
+
+.legend-item {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 8px;
+	// Include padding within the width so a full-width row (legend-item-right) fits its
+	// column instead of overflowing by the 16px horizontal padding — there is no global
+	// border-box reset, so the default content-box would make it overflow.
+	box-sizing: border-box;
+	max-width: 100%;
+	overflow: hidden;
+	border-radius: 4px;
+	cursor: pointer;
+
+	&.legend-item-right {
+		width: 100%;
+	}
+
+	&.legend-item-off {
+		opacity: 0.3;
+		text-decoration: line-through;
+		text-decoration-thickness: 1px;
+	}
+
+	&.legend-item-focused {
+		opacity: 1;
+	}
+
+	.legend-item-label-trigger {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		flex: 1;
+		min-width: 0;
+		cursor: pointer;
+	}
+
+	.legend-marker {
+		border-width: 2px;
+		border-style: solid;
+		border-radius: 50%;
+		min-width: 11px;
+		min-height: 11px;
+		width: 11px;
+		height: 11px;
+		flex-shrink: 0;
+		cursor: pointer;
+		transition: transform 0.2s ease;
+		position: relative;
+
+		&:hover {
+			transform: scale(1.2);
+			box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
+		}
+
+		&:active {
+			transform: scale(0.9);
+		}
+	}
+
+	.legend-label {
+		flex: 1;
+		font-size: 12px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+		user-select: none;
+	}
+
+	.legend-copy-button {
+		// Always laid out (space reserved) but transparent, so revealing it on
+		// hover fades the icon in without reflowing the row / shifting the label.
+		// Shrink the shared icon Button (defaults to a 2rem square) to the
+		// compact legend row via its size tokens.
+		--button-height: auto;
+		--button-width: auto;
+		--button-padding: 2px;
+
+		opacity: 0;
+		flex-shrink: 0;
+		color: var(--l2-foreground);
+		border-radius: 4px;
+		transition:
+			opacity 0.15s ease,
+			color 0.15s ease;
+
+		&:hover {
+			color: var(--l1-foreground);
+		}
+	}
+
+	&:hover {
+		background: var(--l3-background);
+		.legend-copy-button {
+			opacity: 1;
+		}
+	}
+}

frontend/src/lib/uPlotV2/components/Legend/Legend.tsx

@@ -1,144 +1,139 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { VirtuosoGrid } from 'react-virtuoso';
+import { Input } from 'antd';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
 import cx from 'classnames';
+import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendItem } from 'lib/uPlotV2/config/types';
+import CopyButton from 'periscope/components/CopyButton/CopyButton';
 
 import { LegendPosition, LegendProps } from '../types';
 
-import { LEGEND_ITEM_EXTRA_WIDTH, MAX_LEGEND_WIDTH } from './constants';
-import LegendRow from './LegendRow';
-import LegendToolbar from './LegendToolbar';
-import { filterLegendItems, getShownSeriesState } from './utils';
+import './Legend.styles.scss';
 
-import styles from './Legend.module.scss';
+export const MAX_LEGEND_WIDTH = 240;
 
 /**
- * Presentational legend, source-agnostic: the uPlot charts feed it via
- * UPlotLegend, Pie feeds it directly. Every state change is delegated.
+ * Presentational legend. Renders the supplied `items` (markers + labels, an
+ * optional copy button, and a search box for the RIGHT position) and delegates
+ * all interaction to the container handlers. Source-agnostic — the uPlot
+ * charts feed it via UPlotLegend; Pie feeds it directly.
  */
 export default function Legend({
 	items,
 	position,
 	averageLegendWidth = MAX_LEGEND_WIDTH,
 	focusedSeriesIndex,
-	onToggleSeries,
-	onShowOnlySeries,
-	onShowSeries,
-	onHoverSeries,
+	onClick,
+	onMouseMove,
+	onMouseLeave,
 	showCopy = true,
 }: LegendProps): JSX.Element {
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
-	const [filterQuery, setFilterQuery] = useState('');
+	const [legendSearchQuery, setLegendSearchQuery] = useState('');
 
-	const itemWidth = averageLegendWidth + LEGEND_ITEM_EXTRA_WIDTH;
-	const isRightPosition = position === LegendPosition.RIGHT;
+	// Search is intrinsic to the right-positioned legend.
+	const searchEnabled = position === LegendPosition.RIGHT;
+	const { width: containerWidth } = useResizeObserver(legendContainerRef);
 
-	const { visibleCount, soleShownSeriesIndex } = useMemo(
-		() => getShownSeriesState(items),
-		[items],
-	);
+	const isSingleRow = useMemo(() => {
+		if (position !== LegendPosition.BOTTOM || containerWidth <= 0) {
+			return false;
+		}
+		const totalLegendWidth = items.length * (averageLegendWidth + 16);
+		const totalRows = Math.ceil(totalLegendWidth / containerWidth);
+		return totalRows <= 1;
+	}, [averageLegendWidth, items.length, position, containerWidth]);
 
-	// A bottom legend gets two rows; spending one on chrome costs more chart than
-	// the readout is worth.
-	const showToolbar = isRightPosition && items.length > 0;
-	const showFilter = showToolbar;
+	const visibleLegendItems = useMemo(() => {
+		if (!searchEnabled || !legendSearchQuery.trim()) {
+			return items;
+		}
 
-	const effectiveQuery = showFilter ? filterQuery : '';
-
-	const visibleLegendItems = useMemo(
-		() => filterLegendItems(items, effectiveQuery),
-		[items, effectiveQuery],
-	);
-
-	const isEmptyState =
-		!!effectiveQuery.trim() && visibleLegendItems.length === 0;
-
-	/**
-	 * Everything showing -> isolate. One showing -> that row shows all, another
-	 * row takes over the isolation (Add is what keeps both). Otherwise -> toggle.
-	 */
-	const handleRowClick = useCallback(
-		(seriesIndex: number): void => {
-			const isEverythingShown = visibleCount === items.length;
-			const isOneShown = soleShownSeriesIndex !== null;
-
-			if (isEverythingShown || isOneShown) {
-				onShowOnlySeries(seriesIndex);
-				return;
-			}
-
-			onToggleSeries(seriesIndex);
-		},
-		[
-			visibleCount,
-			items.length,
-			soleShownSeriesIndex,
-			onShowOnlySeries,
-			onToggleSeries,
-		],
-	);
-
-	// A row that unmounts under the pointer never fires its own mouseleave.
-	const handleMouseLeave = useCallback(
-		(): void => onHoverSeries(null),
-		[onHoverSeries],
-	);
+		const query = legendSearchQuery.trim().toLowerCase();
+		return items.filter((item) => item.label?.toLowerCase().includes(query));
+	}, [searchEnabled, legendSearchQuery, items]);
 
 	const renderLegendItem = useCallback(
-		(item: LegendItem): JSX.Element => (
-			<LegendRow
-				key={item.seriesIndex}
-				item={item}
-				isSoleShown={soleShownSeriesIndex === item.seriesIndex}
-				isFocused={focusedSeriesIndex === item.seriesIndex}
-				showCopy={showCopy}
-				onRowClick={handleRowClick}
-				onToggleVisibility={onToggleSeries}
-				onShowOnly={onShowOnlySeries}
-				onShow={onShowSeries}
-				onHover={onHoverSeries}
-			/>
-		),
-		[
-			soleShownSeriesIndex,
-			focusedSeriesIndex,
-			showCopy,
-			handleRowClick,
-			onToggleSeries,
-			onShowOnlySeries,
-			onShowSeries,
-			onHoverSeries,
-		],
+		(item: LegendItem): JSX.Element => {
+			// `color` is uPlot's stroke union (string | fn | gradient); only a string
+			// is a usable CSS colour for the marker.
+			const markerColor = typeof item.color === 'string' ? item.color : undefined;
+			return (
+				<div
+					key={item.seriesIndex}
+					data-legend-item-id={item.seriesIndex}
+					className={cx('legend-item', `legend-item-${position.toLowerCase()}`, {
+						'legend-item-off': !item.show,
+						'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
+					})}
+				>
+					<TooltipSimple title={item.label} arrow side="top" disableHoverableContent>
+						<div className="legend-item-label-trigger">
+							<div
+								className="legend-marker"
+								style={{ borderColor: markerColor }}
+								data-is-legend-marker={true}
+							/>
+							<span className="legend-label">{item.label}</span>
+						</div>
+					</TooltipSimple>
+					{showCopy && (
+						<CopyButton
+							value={item.label ?? ''}
+							size={12}
+							className="legend-copy-button"
+							ariaLabel={`Copy ${item.label}`}
+							testId="legend-copy"
+						/>
+					)}
+				</div>
+			);
+		},
+		[focusedSeriesIndex, position, showCopy],
 	);
 
+	const isEmptyState = useMemo(() => {
+		if (!searchEnabled || !legendSearchQuery.trim()) {
+			return false;
+		}
+		return visibleLegendItems.length === 0;
+	}, [searchEnabled, legendSearchQuery, visibleLegendItems]);
+
 	return (
 		<div
 			ref={legendContainerRef}
-			className={cx(styles.container, {
-				[styles.isRight]: isRightPosition,
-			})}
-			style={{ ['--legend-item-width' as string]: `${itemWidth}px` }}
-			onMouseLeave={handleMouseLeave}
-			data-testid="legend-container"
+			className="legend-container"
+			onClick={onClick}
+			onMouseMove={onMouseMove}
+			onMouseLeave={onMouseLeave}
+			style={{
+				['--legend-average-width' as string]: `${averageLegendWidth + 16}px`, // 16px is the marker width
+			}}
 		>
-			{showToolbar && (
-				<LegendToolbar
-					visibleCount={visibleCount}
-					totalCount={items.length}
-					showFilter={showFilter}
-					filterQuery={filterQuery}
-					onFilterQueryChange={setFilterQuery}
-				/>
+			{searchEnabled && (
+				<div className="legend-search-container">
+					<Input
+						allowClear
+						placeholder="Search..."
+						value={legendSearchQuery}
+						onChange={(e): void => setLegendSearchQuery(e.target.value)}
+						data-testid="legend-search-input"
+						className="legend-search-input"
+					/>
+				</div>
 			)}
 			{isEmptyState ? (
-				<div className={styles.emptyState}>
-					No series found matching &quot;{effectiveQuery}&quot;
+				<div className="legend-empty-state">
+					No series found matching &quot;{legendSearchQuery}&quot;
 				</div>
 			) : (
 				<VirtuosoGrid
-					className={styles.scroller}
-					listClassName={styles.gridList}
-					itemClassName={styles.gridItem}
+					className={cx(
+						'legend-virtuoso-container',
+						`legend-virtuoso-container-${position.toLowerCase()}`,
+						{ 'legend-virtuoso-container-single-row': isSingleRow },
+					)}
 					data={visibleLegendItems}
 					itemContent={(_, item): JSX.Element => renderLegendItem(item)}
 				/>

frontend/src/lib/uPlotV2/components/Legend/LegendRow.tsx

@@ -1,209 +0,0 @@
-import { KeyboardEvent, memo, MouseEvent, useCallback } from 'react';
-import { Crosshair, Plus } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import cx from 'classnames';
-import { LegendItem } from 'lib/uPlotV2/config/types';
-import CopyButton from 'periscope/components/CopyButton/CopyButton';
-
-import { LEGEND_TOOLTIP_DELAY_MS } from './constants';
-import styles from './Legend.module.scss';
-
-export interface LegendRowProps {
-	item: LegendItem;
-	/** The only series currently shown, so hiding it is refused. */
-	isSoleShown: boolean;
-	isFocused: boolean;
-	showCopy: boolean;
-	/** Row click, whose meaning depends on how many series are shown. */
-	onRowClick: (seriesIndex: number) => void;
-	/** Marker click: hide or show just this series. */
-	onToggleVisibility: (seriesIndex: number) => void;
-	onShowOnly: (seriesIndex: number) => void;
-	onShow: (seriesIndex: number) => void;
-	onHover: (seriesIndex: number | null) => void;
-}
-
-/**
- * One legend row. The marker is its own target for excluding a single series —
- * the one thing the row click can't do while everything is showing. The actions
- * overlay the label's tail rather than taking layout width, and their reveal is
- * pure CSS.
- */
-function LegendRow({
-	item,
-	isSoleShown,
-	isFocused,
-	showCopy,
-	onRowClick,
-	onToggleVisibility,
-	onShowOnly,
-	onShow,
-	onHover,
-}: LegendRowProps): JSX.Element {
-	const { seriesIndex, show } = item;
-	const label = item.label ?? '';
-	const canAdd = !show;
-	const onlyActionLabel = isSoleShown
-		? 'Show all series'
-		: `Show only current series`;
-	// `color` is uPlot's stroke union (string | fn | gradient); only a string is
-	// a usable CSS colour for the marker.
-	const seriesColor = typeof item.color === 'string' ? item.color : undefined;
-
-	const handleRowClick = useCallback(
-		(): void => onRowClick(seriesIndex),
-		[onRowClick, seriesIndex],
-	);
-
-	const handleMarkerClick = useCallback(
-		(event: MouseEvent<HTMLButtonElement>): void => {
-			event.stopPropagation();
-			onToggleVisibility(seriesIndex);
-		},
-		[onToggleVisibility, seriesIndex],
-	);
-
-	const handleKeyDown = useCallback(
-		(event: KeyboardEvent<HTMLDivElement>): void => {
-			// Let the row actions handle their own keys.
-			if (event.target !== event.currentTarget) {
-				return;
-			}
-			if (event.key === 'Enter' || event.key === ' ') {
-				event.preventDefault();
-				onRowClick(seriesIndex);
-			}
-		},
-		[onRowClick, seriesIndex],
-	);
-
-	const handleShowOnly = useCallback(
-		(event: MouseEvent<HTMLButtonElement>): void => {
-			event.stopPropagation();
-			onShowOnly(seriesIndex);
-		},
-		[onShowOnly, seriesIndex],
-	);
-
-	const handleShow = useCallback(
-		(event: MouseEvent<HTMLButtonElement>): void => {
-			event.stopPropagation();
-			onShow(seriesIndex);
-		},
-		[onShow, seriesIndex],
-	);
-
-	const handleMouseEnter = useCallback(
-		(): void => onHover(seriesIndex),
-		[onHover, seriesIndex],
-	);
-
-	const handleMouseLeave = useCallback((): void => onHover(null), [onHover]);
-
-	return (
-		<div
-			className={cx(styles.row, {
-				[styles.isHidden]: !show,
-				[styles.isFocused]: isFocused,
-			})}
-			data-legend-item-id={seriesIndex}
-			data-testid={`legend-item-${seriesIndex}`}
-			role="switch"
-			tabIndex={0}
-			aria-checked={show}
-			aria-label={label}
-			onClick={handleRowClick}
-			onKeyDown={handleKeyDown}
-			onMouseEnter={handleMouseEnter}
-			onMouseLeave={handleMouseLeave}
-		>
-			<button
-				type="button"
-				className={styles.marker}
-				style={{
-					borderColor: seriesColor,
-					backgroundColor: show ? seriesColor : 'transparent',
-				}}
-				onClick={handleMarkerClick}
-				disabled={isSoleShown}
-				aria-label={`${show ? 'Hide' : 'Show'} ${label}`}
-				data-is-legend-marker={true}
-				data-testid={`legend-marker-${seriesIndex}`}
-			/>
-			<TooltipSimple
-				title={label}
-				arrow
-				side="top"
-				delayDuration={LEGEND_TOOLTIP_DELAY_MS}
-				disableHoverableContent
-				tooltipContentProps={{ className: styles.rowTooltip }}
-			>
-				<span className={styles.label}>{label}</span>
-			</TooltipSimple>
-			<div className={styles.actions}>
-				{canAdd && (
-					<TooltipSimple
-						title="Show this series too"
-						arrow
-						side="top"
-						delayDuration={LEGEND_TOOLTIP_DELAY_MS}
-						disableHoverableContent
-						tooltipContentProps={{ className: styles.rowTooltip }}
-					>
-						{/* Radix's asChild merge strips the button's own data-testid. */}
-						<span className={styles.actionTrigger}>
-							<Button
-								variant="ghost"
-								color="secondary"
-								size="icon"
-								className={styles.actionButton}
-								onClick={handleShow}
-								aria-label={`Show ${label} too`}
-								testId={`legend-add-${seriesIndex}`}
-							>
-								<Plus size={13} />
-							</Button>
-						</span>
-					</TooltipSimple>
-				)}
-				<TooltipSimple
-					title={onlyActionLabel}
-					arrow
-					side="top"
-					delayDuration={LEGEND_TOOLTIP_DELAY_MS}
-					disableHoverableContent
-					tooltipContentProps={{ className: styles.rowTooltip }}
-				>
-					<span className={styles.actionTrigger}>
-						<Button
-							variant="ghost"
-							color="secondary"
-							size="icon"
-							className={cx(styles.actionButton, {
-								[styles.isActive]: isSoleShown,
-							})}
-							onClick={handleShowOnly}
-							aria-pressed={isSoleShown}
-							aria-label={onlyActionLabel}
-							testId={`legend-only-${seriesIndex}`}
-						>
-							<Crosshair size={13} />
-						</Button>
-					</span>
-				</TooltipSimple>
-				{showCopy && (
-					<CopyButton
-						value={label}
-						size={13}
-						className={styles.actionButton}
-						ariaLabel={`Copy ${label}`}
-						testId={`legend-copy-${seriesIndex}`}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default memo(LegendRow);

frontend/src/lib/uPlotV2/components/Legend/LegendToolbar.tsx

@@ -1,56 +0,0 @@
-import { ChangeEvent, useCallback } from 'react';
-import { Input } from 'antd';
-import { Search } from '@signozhq/icons';
-
-import styles from './Legend.module.scss';
-
-export interface LegendToolbarProps {
-	visibleCount: number;
-	totalCount: number;
-	/** Search is intrinsic to the right-positioned legend. */
-	showFilter: boolean;
-	filterQuery: string;
-	onFilterQueryChange: (query: string) => void;
-}
-
-/** Legend chrome: the series search box and the "Showing N of M" readout. */
-export default function LegendToolbar({
-	visibleCount,
-	totalCount,
-	showFilter,
-	filterQuery,
-	onFilterQueryChange,
-}: LegendToolbarProps): JSX.Element {
-	const handleFilterChange = useCallback(
-		(event: ChangeEvent<HTMLInputElement>): void =>
-			onFilterQueryChange(event.target.value),
-		[onFilterQueryChange],
-	);
-
-	return (
-		<>
-			{showFilter && (
-				<div className={styles.searchContainer}>
-					<Input
-						allowClear
-						prefix={<Search size={12} className={styles.searchIcon} />}
-						placeholder="Search..."
-						value={filterQuery}
-						onChange={handleFilterChange}
-						className={styles.searchInput}
-						data-testid="legend-search-input"
-					/>
-				</div>
-			)}
-			<div className={styles.toolbar}>
-				<span
-					className={styles.status}
-					aria-live="polite"
-					data-testid="legend-status"
-				>
-					{`Showing ${visibleCount} of ${totalCount} series`}
-				</span>
-			</div>
-		</>
-	);
-}

frontend/src/lib/uPlotV2/components/Legend/UPlotLegend.tsx

@@ -8,8 +8,8 @@ import Legend from './Legend';
 
 /**
  * uPlot legend controller. Derives the legend items + focus/visibility state
- * from the chart config (useLegendsSync) and the series interactions from the
- * plot context (useLegendActions), then renders the presentational Legend.
+ * from the chart config (useLegendsSync) and the toggle/focus interactions from
+ * the plot context (useLegendActions), then renders the presentational Legend.
  * Must be rendered inside a PlotContextProvider.
  */
 export default function UPlotLegend({
@@ -17,9 +17,13 @@ export default function UPlotLegend({
 	config,
 	averageLegendWidth,
 }: UPlotLegendProps): JSX.Element {
-	const { legendItemsMap, focusedSeriesIndex } = useLegendsSync({ config });
-	const { onToggleSeries, onShowOnlySeries, onShowSeries, onHoverSeries } =
-		useLegendActions();
+	const { legendItemsMap, focusedSeriesIndex, setFocusedSeriesIndex } =
+		useLegendsSync({ config });
+	const { onLegendClick, onLegendMouseMove, onLegendMouseLeave } =
+		useLegendActions({
+			setFocusedSeriesIndex,
+			focusedSeriesIndex,
+		});
 
 	const items = useMemo(() => Object.values(legendItemsMap), [legendItemsMap]);
 
@@ -29,10 +33,9 @@ export default function UPlotLegend({
 			position={position}
 			averageLegendWidth={averageLegendWidth}
 			focusedSeriesIndex={focusedSeriesIndex}
-			onToggleSeries={onToggleSeries}
-			onShowOnlySeries={onShowOnlySeries}
-			onShowSeries={onShowSeries}
-			onHoverSeries={onHoverSeries}
+			onClick={onLegendClick}
+			onMouseMove={onLegendMouseMove}
+			onMouseLeave={onLegendMouseLeave}
 		/>
 	);
 }

frontend/src/lib/uPlotV2/components/Legend/__tests__/utils.test.ts

@@ -1,45 +0,0 @@
-import { LegendItem } from 'lib/uPlotV2/config/types';
-
-import { filterLegendItems, getShownSeriesState } from '../utils';
-
-const items = (shown: boolean[]): LegendItem[] =>
-	shown.map((show, index) => ({
-		seriesIndex: index + 1,
-		label: `series-${index}`,
-		color: '#000',
-		show,
-	}));
-
-describe('getShownSeriesState', () => {
-	it('counts the shown series', () => {
-		expect(getShownSeriesState(items([true, false, true]))).toStrictEqual({
-			visibleCount: 2,
-			soleShownSeriesIndex: null,
-		});
-	});
-
-	it('names the series when exactly one is shown', () => {
-		expect(getShownSeriesState(items([false, true, false]))).toStrictEqual({
-			visibleCount: 1,
-			soleShownSeriesIndex: 2,
-		});
-	});
-
-	it('reports nothing shown', () => {
-		expect(getShownSeriesState(items([false, false]))).toStrictEqual({
-			visibleCount: 0,
-			soleShownSeriesIndex: null,
-		});
-	});
-});
-
-describe('filterLegendItems', () => {
-	it('matches case-insensitively on the label', () => {
-		const filtered = filterLegendItems(items([true, true, true]), 'SERIES-1');
-		expect(filtered.map((item) => item.label)).toStrictEqual(['series-1']);
-	});
-
-	it('returns every item for a blank query', () => {
-		expect(filterLegendItems(items([true, true]), '   ')).toHaveLength(2);
-	});
-});

frontend/src/lib/uPlotV2/components/Legend/constants.ts

@@ -1,20 +0,0 @@
-/** Widest a single legend item is allowed to get when sizing the legend grid. */
-export const MAX_LEGEND_WIDTH = 240;
-
-/**
- * Enough for a row to contain its own hover actions, which a short label would
- * otherwise size a column too narrow for. No room for the label is intended.
- */
-export const MIN_LEGEND_ITEM_WIDTH = 90;
-
-/** Marker + row padding, on top of the estimated label width. */
-export const LEGEND_ITEM_EXTRA_WIDTH = 16;
-
-/** Must match `.row`'s height and the grid's row gap, or the reserved
- * rectangle clips a row. */
-export const LEGEND_ROW_HEIGHT = 28;
-export const LEGEND_ROW_GAP = 2;
-export const LEGEND_MAX_BOTTOM_ROWS = 2;
-
-/** Hover delay before a row's full-name tooltip opens. */
-export const LEGEND_TOOLTIP_DELAY_MS = 500;

frontend/src/lib/uPlotV2/components/Legend/utils.ts

@@ -1,34 +0,0 @@
-import { LegendItem } from 'lib/uPlotV2/config/types';
-
-export interface ShownSeriesState {
-	visibleCount: number;
-	/** The series index when exactly one series is shown, else null. */
-	soleShownSeriesIndex: number | null;
-}
-
-/**
- * Driven by what is actually shown, never a remembered isolation: hiding series
- * one at a time down to a single one is the same state as "Only".
- */
-export function getShownSeriesState(items: LegendItem[]): ShownSeriesState {
-	const shown = items.filter((item) => item.show);
-
-	return {
-		visibleCount: shown.length,
-		soleShownSeriesIndex: shown.length === 1 ? shown[0].seriesIndex : null,
-	};
-}
-
-export function filterLegendItems(
-	items: LegendItem[],
-	query: string,
-): LegendItem[] {
-	const normalisedQuery = query.trim().toLowerCase();
-	if (!normalisedQuery) {
-		return items;
-	}
-
-	return items.filter((item) =>
-		item.label?.toLowerCase().includes(normalisedQuery),
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem.module.scss

@@ -12,11 +12,10 @@
 	}
 }
 
-// Matches the legend row's marker.
 .uplotTooltipItemMarker {
-	border-radius: var(--radius);
+	border-radius: 50%;
 	border-style: solid;
-	border-width: 1.5px;
+	border-width: 2px;
 	width: 12px;
 	height: 12px;
 	box-sizing: border-box;
@@ -31,23 +30,11 @@
 	justify-content: space-between;
 }
 
-// The legend's mono type; the container's Inter stays for the header.
-.uplotTooltipItemLabel,
-.uplotTooltipItemValue {
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	letter-spacing: -0.01em;
-}
-
 .uplotTooltipItemLabel {
 	white-space: normal;
 	overflow-wrap: anywhere;
 }
 
-.uplotTooltipItemValue {
-	white-space: nowrap;
-}
-
 .uplotTooltipItemContentSeparator {
 	flex: 1;
 	border-width: 0.5px;

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem.tsx

@@ -25,7 +25,7 @@ export default function TooltipItem({
 		>
 			<div
 				className={Styles.uplotTooltipItemMarker}
-				style={{ borderColor: item.color, backgroundColor: item.color }}
+				style={{ borderColor: item.color }}
 				data-is-legend-marker={true}
 				data-testid={markerTestId}
 			/>
@@ -39,7 +39,7 @@ export default function TooltipItem({
 					className={Styles.uplotTooltipItemContentSeparator}
 					style={{ borderColor: item.color }}
 				/>
-				<span className={Styles.uplotTooltipItemValue}>{item.tooltipValue}</span>
+				<span>{item.tooltipValue}</span>
 			</div>
 		</div>
 	);

frontend/src/lib/uPlotV2/components/__tests__/UPlotLegend.test.tsx

@@ -61,16 +61,16 @@ describe('UPlotLegend', () => {
 		},
 	};
 
-	let onToggleSeries: jest.Mock;
-	let onShowOnlySeries: jest.Mock;
-	let onShowSeries: jest.Mock;
-	let onHoverSeries: jest.Mock;
+	let onLegendClick: jest.Mock;
+	let onLegendMouseMove: jest.Mock;
+	let onLegendMouseLeave: jest.Mock;
+	let onFocusSeries: jest.Mock;
 
 	beforeEach(() => {
-		onToggleSeries = jest.fn();
-		onShowOnlySeries = jest.fn();
-		onShowSeries = jest.fn();
-		onHoverSeries = jest.fn();
+		onLegendClick = jest.fn();
+		onLegendMouseMove = jest.fn();
+		onLegendMouseLeave = jest.fn();
+		onFocusSeries = jest.fn();
 
 		mockUseLegendsSync.mockReturnValue({
 			legendItemsMap: baseLegendItemsMap,
@@ -79,10 +79,10 @@ describe('UPlotLegend', () => {
 		});
 
 		mockUseLegendActions.mockReturnValue({
-			onToggleSeries,
-			onShowOnlySeries,
-			onShowSeries,
-			onHoverSeries,
+			onLegendClick,
+			onLegendMouseMove,
+			onLegendMouseLeave,
+			onFocusSeries,
 		});
 	});
 
@@ -102,39 +102,28 @@ describe('UPlotLegend', () => {
 		);
 
 	describe('layout and position', () => {
-		it('renders the search input on a RIGHT legend', () => {
+		it('renders search input when legend position is RIGHT', () => {
 			renderLegend(LegendPosition.RIGHT);
 
 			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
 		});
 
-		it('keeps a BOTTOM legend bare — its two rows all go to series', () => {
+		it('does not render search input when legend position is BOTTOM (default)', () => {
 			renderLegend();
 
 			expect(screen.queryByTestId('legend-search-input')).not.toBeInTheDocument();
-			expect(screen.queryByTestId('legend-status')).not.toBeInTheDocument();
-			// The row interactions are the same in both placements.
-			expect(screen.getByTestId('legend-item-0')).toBeInTheDocument();
-			expect(screen.getByTestId('legend-only-0')).toBeInTheDocument();
 		});
 
-		it('renders the marker with the series colour, filled only when shown', () => {
+		it('renders the marker with the correct border color', () => {
 			renderLegend(LegendPosition.RIGHT);
 
-			expect(
-				document.querySelector(
-					'[data-legend-item-id="0"] [data-is-legend-marker="true"]',
-				),
-			).toHaveStyle({
+			const legendMarker = document.querySelector(
+				'[data-legend-item-id="0"] [data-is-legend-marker="true"]',
+			) as HTMLElement;
+
+			expect(legendMarker).toHaveStyle({
 				'border-color': '#ff0000',
-				'background-color': '#ff0000',
 			});
-			// Hidden series read as an empty checkbox.
-			expect(
-				document.querySelector(
-					'[data-legend-item-id="1"] [data-is-legend-marker="true"]',
-				),
-			).toHaveStyle({ 'background-color': 'transparent' });
 		});
 
 		it('renders all legend items in the grid by default', () => {
@@ -147,33 +136,25 @@ describe('UPlotLegend', () => {
 		});
 	});
 
-	describe('status readout', () => {
-		it('reports how many series are showing', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-status')).toHaveTextContent(
-				'Showing 2 of 3 series',
-			);
-		});
-	});
-
-	describe('filter behavior', () => {
-		it('filters legend items based on the query (case-insensitive)', async () => {
+	describe('search behavior (RIGHT position)', () => {
+		it('filters legend items based on search query (case-insensitive)', async () => {
 			const user = userEvent.setup();
 			renderLegend(LegendPosition.RIGHT);
 
-			await user.type(screen.getByTestId('legend-search-input'), 'a');
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, 'A');
 
 			expect(screen.getByText('A')).toBeInTheDocument();
 			expect(screen.queryByText('B')).not.toBeInTheDocument();
 			expect(screen.queryByText('C')).not.toBeInTheDocument();
 		});
 
-		it('shows the empty state when nothing matches', async () => {
+		it('shows empty state when no legend items match the search query', async () => {
 			const user = userEvent.setup();
 			renderLegend(LegendPosition.RIGHT);
 
-			await user.type(screen.getByTestId('legend-search-input'), 'network');
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, 'network');
 
 			expect(
 				screen.getByText(/No series found matching "network"/i),
@@ -181,11 +162,12 @@ describe('UPlotLegend', () => {
 			expect(screen.queryByTestId('virtuoso-grid')).not.toBeInTheDocument();
 		});
 
-		it('ignores a whitespace-only query', async () => {
+		it('does not filter or show empty state when search query is empty or only whitespace', async () => {
 			const user = userEvent.setup();
 			renderLegend(LegendPosition.RIGHT);
 
-			await user.type(screen.getByTestId('legend-search-input'), '   ');
+			const searchInput = screen.getByTestId('legend-search-input');
+			await user.type(searchInput, '   ');
 
 			expect(
 				screen.queryByText(/No series found matching/i),
@@ -196,231 +178,39 @@ describe('UPlotLegend', () => {
 		});
 	});
 
-	describe('row interactions', () => {
-		const allShownItemsMap = {
-			0: { ...baseLegendItemsMap[0] },
-			1: { ...baseLegendItemsMap[1], show: true },
-			2: { ...baseLegendItemsMap[2] },
-		};
-
-		const mockAllShown = (): void => {
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: allShownItemsMap,
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-		};
-
-		it('isolates the series when everything is showing', async () => {
-			const user = userEvent.setup();
-			mockAllShown();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByText('A'));
-
-			// Nothing the user can see is there to exclude, so the click means Only.
-			expect(onShowOnlySeries).toHaveBeenCalledWith(0);
-			expect(onToggleSeries).not.toHaveBeenCalled();
-		});
-
-		it('toggles the series once something is already hidden', async () => {
+	describe('legend actions', () => {
+		it('calls onLegendClick when a legend item is clicked', async () => {
 			const user = userEvent.setup();
 			renderLegend(LegendPosition.RIGHT);
 
 			await user.click(screen.getByText('A'));
 
-			expect(onToggleSeries).toHaveBeenCalledWith(0);
-			expect(onShowOnlySeries).not.toHaveBeenCalled();
+			expect(onLegendClick).toHaveBeenCalledTimes(1);
 		});
 
-		it('excludes just that series when its marker is clicked', async () => {
-			const user = userEvent.setup();
-			mockAllShown();
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByTestId('legend-marker-0'));
-
-			// The marker is the one way to exclude a single series while
-			// everything is showing — the row click isolates instead.
-			expect(onToggleSeries).toHaveBeenCalledWith(0);
-			expect(onShowOnlySeries).not.toHaveBeenCalled();
-		});
-
-		it('stops the marker offering to hide the last series showing', () => {
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: {
-					0: { ...baseLegendItemsMap[0] },
-					1: { ...baseLegendItemsMap[1] },
-					2: { ...baseLegendItemsMap[2], show: false },
-				},
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-marker-0')).toBeDisabled();
-			expect(screen.getByTestId('legend-marker-1')).toBeEnabled();
-		});
-
-		it('labels the marker with what clicking it does', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-marker-0')).toHaveAttribute(
-				'aria-label',
-				'Hide A',
-			);
-			expect(screen.getByTestId('legend-marker-1')).toHaveAttribute(
-				'aria-label',
-				'Show B',
-			);
-		});
-
-		it('moves the isolation when another row is clicked while one is alone', async () => {
-			const user = userEvent.setup();
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: {
-					0: { ...baseLegendItemsMap[0] },
-					1: { ...baseLegendItemsMap[1] },
-					2: { ...baseLegendItemsMap[2], show: false },
-				},
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-			renderLegend(LegendPosition.RIGHT);
-
-			// Series 0 is showing alone; clicking another row swaps to it rather
-			// than adding it — Add is there for keeping both.
-			await user.click(screen.getByText('B'));
-
-			expect(onShowOnlySeries).toHaveBeenCalledWith(1);
-			expect(onToggleSeries).not.toHaveBeenCalled();
-		});
-
-		it('puts everything back when the series showing alone is clicked', async () => {
-			const user = userEvent.setup();
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: {
-					0: { ...baseLegendItemsMap[0] },
-					1: { ...baseLegendItemsMap[1] },
-					2: { ...baseLegendItemsMap[2], show: false },
-				},
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-			renderLegend(LegendPosition.RIGHT);
-
-			await user.click(screen.getByText('A'));
-
-			// Only clears the isolation, however the legend came to be isolated.
-			expect(onShowOnlySeries).toHaveBeenCalledWith(0);
-			expect(onToggleSeries).not.toHaveBeenCalled();
-		});
-
-		it('toggles the series on Enter and Space', async () => {
+		it('calls mouseMove when the mouse moves over a legend item', async () => {
 			const user = userEvent.setup();
 			renderLegend(LegendPosition.RIGHT);
 
-			const row = screen.getByTestId('legend-item-0');
-			row.focus();
-			await user.keyboard('{Enter}');
-			await user.keyboard(' ');
+			const legendItem = document.querySelector(
+				'[data-legend-item-id="0"]',
+			) as HTMLElement;
 
-			expect(onToggleSeries).toHaveBeenCalledTimes(2);
-			expect(onToggleSeries).toHaveBeenCalledWith(0);
+			await user.hover(legendItem);
+
+			expect(onLegendMouseMove).toHaveBeenCalledTimes(1);
 		});
 
-		it('reflects visibility on the row for assistive tech', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-item-0')).toHaveAttribute(
-				'aria-checked',
-				'true',
-			);
-			expect(screen.getByTestId('legend-item-1')).toHaveAttribute(
-				'aria-checked',
-				'false',
-			);
-		});
-
-		it('isolates the series from Only without also toggling the row', async () => {
+		it('calls onLegendMouseLeave when the mouse leaves the legend container', async () => {
 			const user = userEvent.setup();
 			renderLegend(LegendPosition.RIGHT);
 
-			await user.click(screen.getByTestId('legend-only-0'));
+			const container = document.querySelector('.legend-container') as HTMLElement;
 
-			expect(onShowOnlySeries).toHaveBeenCalledWith(0);
-			expect(onToggleSeries).not.toHaveBeenCalled();
-		});
+			await user.hover(container);
+			await user.unhover(container);
 
-		it('highlights the hovered series and clears it on leave', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			const row = screen.getByTestId('legend-item-0');
-			await user.hover(row);
-			expect(onHoverSeries).toHaveBeenCalledWith(0);
-
-			await user.unhover(row);
-			expect(onHoverSeries).toHaveBeenCalledWith(null);
-		});
-	});
-
-	describe('one-series state', () => {
-		const soleShownItemsMap = {
-			0: { ...baseLegendItemsMap[0] },
-			1: { ...baseLegendItemsMap[1] },
-			2: { ...baseLegendItemsMap[2], show: false },
-		};
-
-		beforeEach(() => {
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: soleShownItemsMap,
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-		});
-
-		it('lights Only on the series that is showing alone', () => {
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.getByTestId('legend-only-0')).toHaveAttribute(
-				'aria-pressed',
-				'true',
-			);
-			expect(screen.getByTestId('legend-only-1')).toHaveAttribute(
-				'aria-pressed',
-				'false',
-			);
-		});
-
-		it('offers Add on the hidden rows, not the one that is showing', async () => {
-			const user = userEvent.setup();
-			renderLegend(LegendPosition.RIGHT);
-
-			expect(screen.queryByTestId('legend-add-0')).not.toBeInTheDocument();
-
-			await user.click(screen.getByTestId('legend-add-1'));
-
-			expect(onShowSeries).toHaveBeenCalledWith(1);
-			expect(onToggleSeries).not.toHaveBeenCalled();
-		});
-
-		it('keeps Add on every hidden row however many are showing', () => {
-			mockUseLegendsSync.mockReturnValue({
-				legendItemsMap: {
-					0: { ...baseLegendItemsMap[0] },
-					1: { ...baseLegendItemsMap[1] },
-					2: { ...baseLegendItemsMap[2], show: false },
-				},
-				focusedSeriesIndex: null,
-				setFocusedSeriesIndex: jest.fn(),
-			});
-			renderLegend(LegendPosition.RIGHT);
-
-			// Two shown, two hidden: both hidden rows can still be added.
-			expect(screen.getByTestId('legend-add-1')).toBeInTheDocument();
-			expect(screen.getByTestId('legend-add-2')).toBeInTheDocument();
-			expect(screen.queryByTestId('legend-add-0')).not.toBeInTheDocument();
+			expect(onLegendMouseLeave).toHaveBeenCalledTimes(1);
 		});
 	});
 });

frontend/src/lib/uPlotV2/components/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import uPlot from 'uplot';
@@ -118,23 +118,23 @@ export interface LegendConfig {
 /**
  * Presentational legend props. Source-agnostic: it renders whatever `items`
  * it's given and delegates interaction to the container handlers, so it serves
- * both uPlot charts (via UPlotLegend) and non-uPlot charts (Pie).
+ * both uPlot charts (via UPlotLegend) and non-uPlot charts (Pie). The search
+ * box is intrinsic to the RIGHT position (derived from `position`, not a flag).
  */
 export interface LegendProps {
 	items: LegendItem[];
 	/** Legend placement; always supplied by the container. */
 	position: LegendPosition;
 	averageLegendWidth?: number;
-	/** Series index highlighted by the chart cursor. */
+	/** Series index to highlight (hovered/focused). */
 	focusedSeriesIndex: number | null;
-	/** Row click / Space / Enter: hide or show that one series. */
-	onToggleSeries: (seriesIndex: number) => void;
-	/** "Only": show that series alone, or show all when it is already alone. */
-	onShowOnlySeries: (seriesIndex: number) => void;
-	/** "Add": show that series alongside the one already shown. */
-	onShowSeries: (seriesIndex: number) => void;
-	/** Row hover, for the chart-side highlight; null on leave. */
-	onHoverSeries: (seriesIndex: number | null) => void;
+	/**
+	 * Container-delegated handlers. Items carry `data-legend-item-id`, so the
+	 * handler reads the target's id rather than binding per item.
+	 */
+	onClick: MouseEventHandler<HTMLDivElement>;
+	onMouseMove: MouseEventHandler<HTMLDivElement>;
+	onMouseLeave: () => void;
 	/** Show the per-item copy button. Default true. */
 	showCopy?: boolean;
 }

frontend/src/lib/uPlotV2/constants.ts

@@ -6,11 +6,6 @@ export const DEFAULT_HOVER_PROXIMITY_VALUE = 30; // only snap if within 30px hor
 export const DEFAULT_FOCUS_PROXIMITY_VALUE = 1e6;
 export const STEP_INTERVAL_MULTIPLIER = 3; // multiply the width computed by STEP_INTERVAL_MULTIPLIER to get the hover prox value
 
-/** Opacity applied to the series that are NOT highlighted while a legend row is hovered. */
-export const LEGEND_HIGHLIGHT_DIM_ALPHA = 0.16;
-/** Stroke-width multiplier applied to the series highlighted from the legend. */
-export const LEGEND_HIGHLIGHT_WIDTH_RATIO = 1.6;
-
 export const DEFAULT_PLOT_CONFIG: Partial<Options> = {
 	focus: {
 		alpha: 0.3,

frontend/src/lib/uPlotV2/context/PlotContext.tsx

@@ -8,10 +8,6 @@ import {
 	useMemo,
 	useRef,
 } from 'react';
-import {
-	LEGEND_HIGHLIGHT_DIM_ALPHA,
-	LEGEND_HIGHLIGHT_WIDTH_RATIO,
-} from 'lib/uPlotV2/constants';
 import type { SeriesVisibilityItem } from 'lib/visualization/panels/types';
 import { updateSeriesVisibilityToLocalStorage } from 'lib/visualization/panels/utils/legendVisibilityUtils';
 import type uPlot from 'uplot';
@@ -24,26 +20,12 @@ export interface IPlotContext {
 	setPlotContextInitialState: (state: PlotContextInitialState) => void;
 	onToggleSeriesVisibility: (seriesIndex: number) => void;
 	onToggleSeriesOnOff: (seriesIndex: number) => void;
-	/** Show this series alone; showing all again when it is already the only one shown. */
-	onShowOnlySeries: (seriesIndex: number) => void;
-	/** Show this series without hiding anything else. */
-	onShowSeries: (seriesIndex: number) => void;
 	onFocusSeries: (seriesIndex: number | null) => void;
-	/** Lift one series above the rest (dim + thicken) without changing visibility. */
-	onHighlightSeries: (seriesIndex: number | null) => void;
 	syncSeriesVisibilityToLocalStorage: () => void;
 }
 
 export const PlotContext = createContext<IPlotContext | null>(null);
 
-/** Data series (index 0 is the x-axis) currently drawn. */
-const countShownSeries = (plot: uPlot): number =>
-	plot.series.reduce(
-		(count, series, index) =>
-			index > 0 && series.show !== false ? count + 1 : count,
-		0,
-	);
-
 export const PlotContextProvider = ({
 	children,
 }: PropsWithChildren): JSX.Element => {
@@ -51,9 +33,6 @@ export const PlotContextProvider = ({
 	const activeSeriesIndex = useRef<number | undefined>(undefined);
 	const idRef = useRef<string | undefined>(undefined);
 	const shouldSavePreferencesRef = useRef<boolean>(false);
-	/** Pre-highlight stroke widths, captured on the first highlight so it can be undone. */
-	const baseSeriesWidthsRef = useRef<Map<number, number | undefined>>(new Map());
-	const highlightedSeriesIndexRef = useRef<number | null>(null);
 
 	const setPlotContextInitialState = useCallback(
 		({
@@ -64,8 +43,6 @@ export const PlotContextProvider = ({
 			uPlotInstanceRef.current = uPlotInstance;
 			idRef.current = id;
 			activeSeriesIndex.current = undefined;
-			baseSeriesWidthsRef.current = new Map();
-			highlightedSeriesIndexRef.current = null;
 			shouldSavePreferencesRef.current = !!shouldSaveSelectionPreference;
 		},
 		[],
@@ -87,54 +64,6 @@ export const PlotContextProvider = ({
 		updateSeriesVisibilityToLocalStorage(idRef.current, seriesVisibility);
 	}, []);
 
-	const onHighlightSeries = useCallback((seriesIndex: number | null): void => {
-		const plot = uPlotInstanceRef.current;
-		if (!plot) {
-			return;
-		}
-
-		highlightedSeriesIndexRef.current = seriesIndex;
-
-		plot.series.forEach((series, index) => {
-			if (index === 0) {
-				return;
-			}
-			if (!baseSeriesWidthsRef.current.has(index)) {
-				baseSeriesWidthsRef.current.set(index, series.width);
-			}
-			const baseWidth = baseSeriesWidthsRef.current.get(index);
-			const isHighlighted = index === seriesIndex;
-
-			/* eslint-disable no-param-reassign */
-			series.alpha =
-				seriesIndex === null || isHighlighted ? 1 : LEGEND_HIGHLIGHT_DIM_ALPHA;
-			series.width =
-				isHighlighted && baseWidth !== undefined
-					? baseWidth * LEGEND_HIGHLIGHT_WIDTH_RATIO
-					: baseWidth;
-			/* eslint-enable no-param-reassign */
-		});
-
-		// Only the stroke style changed, so the cached paths stay valid.
-		plot.redraw(false);
-	}, []);
-
-	/**
-	 * Leaving the dim on a hidden series leaves every other one faded, which
-	 * reads as an isolation rather than as one series being excluded.
-	 */
-	const clearHighlightIfHidden = useCallback((): void => {
-		const plot = uPlotInstanceRef.current;
-		const highlightedIndex = highlightedSeriesIndexRef.current;
-		if (!plot || highlightedIndex === null) {
-			return;
-		}
-
-		if (plot.series[highlightedIndex]?.show === false) {
-			onHighlightSeries(null);
-		}
-	}, [onHighlightSeries]);
-
 	const onToggleSeriesVisibility = useCallback(
 		(seriesIndex: number): void => {
 			const plot = uPlotInstanceRef.current;
@@ -174,78 +103,10 @@ export const PlotContextProvider = ({
 			if (!series) {
 				return;
 			}
-
-			// An empty chart is never worth reaching.
-			const isHiding = series.show !== false;
-			if (isHiding && countShownSeries(plot) <= 1) {
-				return;
-			}
-
 			plot.setSeries(seriesIndex, { show: !series.show });
 			if (idRef.current && shouldSavePreferencesRef.current) {
 				syncSeriesVisibilityToLocalStorage();
 			}
-
-			clearHighlightIfHidden();
-		},
-		[syncSeriesVisibilityToLocalStorage, clearHighlightIfHidden],
-	);
-
-	/** Applies `resolveShow` to every data series in one batch, then persists. */
-	const setSeriesVisibility = useCallback(
-		(resolveShow: (seriesIndex: number) => boolean): void => {
-			const plot = uPlotInstanceRef.current;
-			if (!plot) {
-				return;
-			}
-
-			activeSeriesIndex.current = undefined;
-
-			plot.batch(() => {
-				plot.series.forEach((_, index) => {
-					if (index === 0) {
-						return;
-					}
-					plot.setSeries(index, { show: resolveShow(index) });
-				});
-				if (idRef.current && shouldSavePreferencesRef.current) {
-					syncSeriesVisibilityToLocalStorage();
-				}
-			});
-
-			clearHighlightIfHidden();
-		},
-		[syncSeriesVisibilityToLocalStorage, clearHighlightIfHidden],
-	);
-
-	const onShowOnlySeries = useCallback(
-		(seriesIndex: number): void => {
-			const plot = uPlotInstanceRef.current;
-			if (!plot) {
-				return;
-			}
-
-			// From what is on screen, not a remembered isolation.
-			const isAlreadySole =
-				countShownSeries(plot) === 1 && plot.series[seriesIndex]?.show !== false;
-
-			setSeriesVisibility((index) => isAlreadySole || index === seriesIndex);
-		},
-		[setSeriesVisibility],
-	);
-
-	const onShowSeries = useCallback(
-		(seriesIndex: number): void => {
-			const plot = uPlotInstanceRef.current;
-			if (!plot?.series[seriesIndex]) {
-				return;
-			}
-
-			activeSeriesIndex.current = undefined;
-			plot.setSeries(seriesIndex, { show: true });
-			if (idRef.current && shouldSavePreferencesRef.current) {
-				syncSeriesVisibilityToLocalStorage();
-			}
 		},
 		[syncSeriesVisibilityToLocalStorage],
 	);
@@ -270,20 +131,14 @@ export const PlotContextProvider = ({
 			onToggleSeriesVisibility,
 			setPlotContextInitialState,
 			onToggleSeriesOnOff,
-			onShowOnlySeries,
-			onShowSeries,
 			onFocusSeries,
-			onHighlightSeries,
 			syncSeriesVisibilityToLocalStorage,
 		}),
 		[
 			onToggleSeriesVisibility,
 			setPlotContextInitialState,
 			onToggleSeriesOnOff,
-			onShowOnlySeries,
-			onShowSeries,
 			onFocusSeries,
-			onHighlightSeries,
 			syncSeriesVisibilityToLocalStorage,
 		],
 	);

frontend/src/lib/uPlotV2/context/__tests__/PlotContext.test.tsx

@@ -26,7 +26,6 @@ const createMockPlot = (series: MockSeries[] = []): uPlot =>
 		series,
 		batch: jest.fn((fn: () => void) => fn()),
 		setSeries: jest.fn(),
-		redraw: jest.fn(),
 	}) as unknown as uPlot;
 
 interface TestComponentProps {
@@ -45,10 +44,7 @@ const TestComponent = ({
 		syncSeriesVisibilityToLocalStorage,
 		onToggleSeriesVisibility,
 		onToggleSeriesOnOff,
-		onShowOnlySeries,
-		onShowSeries,
 		onFocusSeries,
-		onHighlightSeries,
 	} = usePlotContext();
 	const handleInit = (): void => {
 		if (!plot || !id || typeof shouldSaveSelectionPreference !== 'boolean') {
@@ -102,34 +98,6 @@ const TestComponent = ({
 			>
 				Focus series
 			</button>
-			<button
-				type="button"
-				data-testid="show-only-1"
-				onClick={(): void => onShowOnlySeries(1)}
-			>
-				Show only 1
-			</button>
-			<button
-				type="button"
-				data-testid="show-series-2"
-				onClick={(): void => onShowSeries(2)}
-			>
-				Show 2
-			</button>
-			<button
-				type="button"
-				data-testid="highlight-1"
-				onClick={(): void => onHighlightSeries(1)}
-			>
-				Highlight 1
-			</button>
-			<button
-				type="button"
-				data-testid="clear-highlight"
-				onClick={(): void => onHighlightSeries(null)}
-			>
-				Clear highlight
-			</button>
 		</div>
 	);
 };
@@ -305,7 +273,6 @@ describe('PlotContext', () => {
 			const series: MockSeries[] = [
 				{ label: 'x-axis', show: true },
 				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
 			];
 			const plot = createMockPlot(series);
 
@@ -357,7 +324,6 @@ describe('PlotContext', () => {
 			const series: MockSeries[] = [
 				{ label: 'x-axis', show: true },
 				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
 			];
 			const plot = createMockPlot(series);
 
@@ -377,48 +343,6 @@ describe('PlotContext', () => {
 			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: false });
 			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
 		});
-
-		it('refuses to hide the last series showing', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			// An empty chart is never a state worth reaching.
-			expect(plot.setSeries).not.toHaveBeenCalled();
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-
-		it('still shows a hidden series when only one is left showing', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: false },
-				{ label: 'Memory', show: true },
-			]);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-		});
 	});
 
 	describe('onFocusSeries', () => {
@@ -457,193 +381,4 @@ describe('PlotContext', () => {
 			expect(plot.setSeries).toHaveBeenCalledWith(1, { focus: true }, false);
 		});
 	});
-	describe('onShowOnlySeries', () => {
-		const renderWithSeries = (
-			series: MockSeries[],
-		): { plot: uPlot; user: ReturnType<typeof userEvent.setup> } => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			return { plot, user };
-		};
-
-		it('hides every other series, leaving the x-axis alone', async () => {
-			const { plot, user } = renderWithSeries([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: true },
-			]);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('show-only-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-			expect(plot.setSeries).toHaveBeenCalledWith(2, { show: false });
-			expect(plot.setSeries).not.toHaveBeenCalledWith(0, expect.anything());
-			expect(mockUpdateSeriesVisibilityToLocalStorage).toHaveBeenCalled();
-		});
-
-		it('shows everything again when that series is already the only one shown', async () => {
-			// Reached by hiding series one at a time, not by a remembered isolation.
-			const { plot, user } = renderWithSeries([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('show-only-1'));
-
-			expect(plot.setSeries).toHaveBeenCalledWith(1, { show: true });
-			expect(plot.setSeries).toHaveBeenCalledWith(2, { show: true });
-		});
-	});
-
-	describe('onShowSeries', () => {
-		it('shows one series without touching the others', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot([
-				{ label: 'x-axis', show: true },
-				{ label: 'CPU', show: true },
-				{ label: 'Memory', show: false },
-			]);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('show-series-2'));
-
-			expect(plot.setSeries).toHaveBeenCalledTimes(1);
-			expect(plot.setSeries).toHaveBeenCalledWith(2, { show: true });
-		});
-	});
-
-	describe('onHighlightSeries', () => {
-		const series = (): MockSeries[] => [
-			{ label: 'x-axis', show: true },
-			{ label: 'CPU', show: true, width: 2 },
-			{ label: 'Memory', show: true, width: 2 },
-		];
-
-		it('dims the other series and thickens the highlighted one', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-
-			expect(plot.series[1].alpha).toBe(1);
-			expect(plot.series[1].width).toBe(3.2);
-			expect(plot.series[2].alpha).toBe(0.16);
-			expect(plot.series[2].width).toBe(2);
-			// Only the stroke changed, so the cached paths are reused.
-			expect(plot.redraw).toHaveBeenCalledWith(false);
-		});
-
-		it('restores every series when the highlight is cleared', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-			await user.click(screen.getByTestId('clear-highlight'));
-
-			expect(plot.series[1].alpha).toBe(1);
-			expect(plot.series[1].width).toBe(2);
-			expect(plot.series[2].alpha).toBe(1);
-			expect(plot.series[2].width).toBe(2);
-		});
-
-		it('drops the dim when the highlighted series is hidden', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-			// The mock's setSeries doesn't mutate, so mirror what uPlot would do.
-			(plot.setSeries as jest.Mock).mockImplementation(
-				(index: number, opts: { show?: boolean }) => {
-					if (typeof opts.show === 'boolean') {
-						(plot.series[index] as MockSeries).show = opts.show;
-					}
-				},
-			);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-			await user.click(screen.getByTestId('toggle-on-off-1'));
-
-			// Otherwise every remaining series stays faded and the panel reads as
-			// an isolation instead of one series being excluded.
-			expect(plot.series[2].alpha).toBe(1);
-			expect(plot.series[2].width).toBe(2);
-		});
-
-		it('keeps the dim when a different series is hidden', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-			(plot.setSeries as jest.Mock).mockImplementation(
-				(index: number, opts: { show?: boolean }) => {
-					if (typeof opts.show === 'boolean') {
-						(plot.series[index] as MockSeries).show = opts.show;
-					}
-				},
-			);
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-			await user.click(screen.getByTestId('show-series-2'));
-
-			expect(plot.series[1].alpha).toBe(1);
-			expect(plot.series[2].alpha).toBe(0.16);
-		});
-
-		it('leaves visibility untouched', async () => {
-			const user = userEvent.setup();
-			const plot = createMockPlot(series());
-
-			render(
-				<PlotContextProvider>
-					<TestComponent plot={plot} id="widget-123" shouldSaveSelectionPreference />
-				</PlotContextProvider>,
-			);
-
-			await user.click(screen.getByTestId('init'));
-			await user.click(screen.getByTestId('highlight-1'));
-
-			expect(plot.setSeries).not.toHaveBeenCalled();
-			expect(mockUpdateSeriesVisibilityToLocalStorage).not.toHaveBeenCalled();
-		});
-	});
 });

frontend/src/lib/uPlotV2/hooks/__tests__/useLegendActions.test.ts

@@ -11,12 +11,10 @@ const mockUsePlotContext = usePlotContext as jest.MockedFunction<
 describe('useLegendActions', () => {
 	let onToggleSeriesVisibility: jest.Mock;
 	let onToggleSeriesOnOff: jest.Mock;
-	let onShowOnlySeries: jest.Mock;
-	let onShowSeries: jest.Mock;
-	let onFocusSeries: jest.Mock;
-	let onHighlightSeries: jest.Mock;
+	let onFocusSeriesPlot: jest.Mock;
 	let setPlotContextInitialState: jest.Mock;
 	let syncSeriesVisibilityToLocalStorage: jest.Mock;
+	let setFocusedSeriesIndexMock: jest.Mock;
 	let cancelAnimationFrameSpy: jest.SpyInstance<void, [handle: number]>;
 
 	beforeAll(() => {
@@ -39,20 +37,15 @@ describe('useLegendActions', () => {
 	beforeEach(() => {
 		onToggleSeriesVisibility = jest.fn();
 		onToggleSeriesOnOff = jest.fn();
-		onShowOnlySeries = jest.fn();
-		onShowSeries = jest.fn();
-		onFocusSeries = jest.fn();
-		onHighlightSeries = jest.fn();
+		onFocusSeriesPlot = jest.fn();
 		setPlotContextInitialState = jest.fn();
 		syncSeriesVisibilityToLocalStorage = jest.fn();
+		setFocusedSeriesIndexMock = jest.fn();
 
 		mockUsePlotContext.mockReturnValue({
 			onToggleSeriesVisibility,
 			onToggleSeriesOnOff,
-			onShowOnlySeries,
-			onShowSeries,
-			onFocusSeries,
-			onHighlightSeries,
+			onFocusSeries: onFocusSeriesPlot,
 			setPlotContextInitialState,
 			syncSeriesVisibilityToLocalStorage,
 		});
@@ -60,65 +53,149 @@ describe('useLegendActions', () => {
 		cancelAnimationFrameSpy.mockClear();
 	});
 
-	describe('visibility actions', () => {
-		it('toggles a single series on row click', () => {
-			const { result } = renderHook(() => useLegendActions());
+	const createMouseEvent = (options: {
+		legendItemId?: number;
+		isMarker?: boolean;
+	}): any => {
+		const { legendItemId, isMarker = false } = options;
 
-			result.current.onToggleSeries(2);
+		return {
+			target: {
+				dataset: {
+					...(isMarker ? { isLegendMarker: 'true' } : {}),
+				},
+				closest: jest.fn(() =>
+					legendItemId !== undefined
+						? { dataset: { legendItemId: String(legendItemId) } }
+						: null,
+				),
+			},
+		};
+	};
 
-			expect(onToggleSeriesOnOff).toHaveBeenCalledWith(2);
-			// The row must never isolate — that is what "Only" is for.
+	describe('onLegendClick', () => {
+		it('toggles series visibility when clicking on legend label', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			result.current.onLegendClick(createMouseEvent({ legendItemId: 0 }));
+
+			expect(onToggleSeriesVisibility).toHaveBeenCalledTimes(1);
+			expect(onToggleSeriesVisibility).toHaveBeenCalledWith(0);
+			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
+		});
+
+		it('toggles series on/off when clicking on marker', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			result.current.onLegendClick(
+				createMouseEvent({ legendItemId: 0, isMarker: true }),
+			);
+
+			expect(onToggleSeriesOnOff).toHaveBeenCalledTimes(1);
+			expect(onToggleSeriesOnOff).toHaveBeenCalledWith(0);
 			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
 		});
 
-		it('forwards the Only and Add actions to the plot', () => {
-			const { result } = renderHook(() => useLegendActions());
+		it('does nothing when click target is not inside a legend item', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
 
-			result.current.onShowOnlySeries(1);
-			result.current.onShowSeries(3);
+			result.current.onLegendClick(createMouseEvent({}));
 
-			expect(onShowOnlySeries).toHaveBeenCalledWith(1);
-			expect(onShowSeries).toHaveBeenCalledWith(3);
+			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
+			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
 		});
 	});
 
-	describe('hover highlight', () => {
-		it('highlights the hovered series', () => {
-			const { result } = renderHook(() => useLegendActions());
+	describe('onFocusSeries', () => {
+		it('schedules focus update and calls plot focus handler via mouse move', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
 
-			result.current.onHoverSeries(2);
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
 
-			expect(onHighlightSeries).toHaveBeenCalledWith(2);
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(0);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(0);
 		});
 
-		it('clears the highlight on leave', () => {
-			const { result } = renderHook(() => useLegendActions());
+		it('cancels previous animation frame before scheduling new one on subsequent mouse moves', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
 
-			result.current.onHoverSeries(null);
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
 
-			expect(onHighlightSeries).toHaveBeenCalledWith(null);
-		});
-
-		it('coalesces rapid hovers into one frame', () => {
-			const { result } = renderHook(() => useLegendActions());
-
-			result.current.onHoverSeries(1);
-			result.current.onHoverSeries(2);
-
-			// Each new hover cancels the frame the previous one queued.
 			expect(cancelAnimationFrameSpy).toHaveBeenCalled();
 		});
+	});
 
-		it('cancels a pending highlight frame on unmount', () => {
-			jest
-				.spyOn(global, 'requestAnimationFrame')
-				.mockImplementation((): number => 7);
+	describe('onLegendMouseMove', () => {
+		it('focuses new series when hovering over different legend item', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: 0,
+				}),
+			);
 
-			const { result, unmount } = renderHook(() => useLegendActions());
-			result.current.onHoverSeries(1);
-			unmount();
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
 
-			expect(cancelAnimationFrameSpy).toHaveBeenCalledWith(7);
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(1);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(1);
+		});
+
+		it('does nothing when hovering over already focused series', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: 1,
+				}),
+			);
+
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
+
+			expect(setFocusedSeriesIndexMock).not.toHaveBeenCalled();
+			expect(onFocusSeriesPlot).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('onLegendMouseLeave', () => {
+		it('cancels pending animation frame and clears focus state', async () => {
+			const { result } = renderHook(() =>
+				useLegendActions({
+					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
+					focusedSeriesIndex: null,
+				}),
+			);
+
+			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
+			result.current.onLegendMouseLeave();
+
+			expect(cancelAnimationFrameSpy).toHaveBeenCalled();
+			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(null);
+			expect(onFocusSeriesPlot).toHaveBeenCalledWith(null);
 		});
 	});
 });

frontend/src/lib/uPlotV2/hooks/useLegendActions.ts

@@ -1,54 +1,117 @@
-import { useCallback, useEffect, useRef } from 'react';
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useRef,
+} from 'react';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 
-export interface UseLegendActionsResult {
-	onToggleSeries: (seriesIndex: number) => void;
-	/** Show this series alone, or show all when it is already alone. */
-	onShowOnlySeries: (seriesIndex: number) => void;
-	/** Show this series alongside the ones already shown. */
-	onShowSeries: (seriesIndex: number) => void;
-	/** null clears the highlight. */
-	onHoverSeries: (seriesIndex: number | null) => void;
-}
-
-/**
- * Legend interactions, bound to the plot through PlotContext. Hover is coalesced
- * to one chart redraw per frame.
- */
-export function useLegendActions(): UseLegendActionsResult {
+export function useLegendActions({
+	setFocusedSeriesIndex,
+	focusedSeriesIndex,
+}: {
+	setFocusedSeriesIndex: Dispatch<SetStateAction<number | null>>;
+	focusedSeriesIndex: number | null;
+}): {
+	onLegendClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+	onFocusSeries: (seriesIndex: number | null) => void;
+	onLegendMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
+	onLegendMouseLeave: () => void;
+} {
 	const {
+		onFocusSeries: onFocusSeriesPlot,
 		onToggleSeriesOnOff,
-		onShowOnlySeries,
-		onShowSeries,
-		onHighlightSeries,
+		onToggleSeriesVisibility,
 	} = usePlotContext();
 
-	const rafIdRef = useRef<number | null>(null);
+	const rafId = useRef<number | null>(null); // requestAnimationFrame id
 
-	const cancelPendingHighlight = useCallback((): void => {
-		if (rafIdRef.current != null) {
-			cancelAnimationFrame(rafIdRef.current);
-			rafIdRef.current = null;
-		}
-	}, []);
+	const getLegendItemIdFromEvent = useCallback(
+		(e: React.MouseEvent<HTMLDivElement>): string | undefined => {
+			const target = e.target as HTMLElement | null;
+			if (!target) {
+				return undefined;
+			}
 
-	const onHoverSeries = useCallback(
-		(seriesIndex: number | null): void => {
-			cancelPendingHighlight();
-			rafIdRef.current = requestAnimationFrame(() => {
-				rafIdRef.current = null;
-				onHighlightSeries(seriesIndex);
-			});
+			const legendItemElement = target.closest<HTMLElement>(
+				'[data-legend-item-id]',
+			);
+
+			return legendItemElement?.dataset.legendItemId;
 		},
-		[cancelPendingHighlight, onHighlightSeries],
+		[],
 	);
 
-	useEffect(() => cancelPendingHighlight, [cancelPendingHighlight]);
+	const onLegendClick = useCallback(
+		(e: React.MouseEvent<HTMLDivElement>): void => {
+			const legendItemId = getLegendItemIdFromEvent(e);
+			if (!legendItemId) {
+				return;
+			}
+			const isLegendMarker = (e.target as HTMLElement).dataset.isLegendMarker;
+			const seriesIndex = Number(legendItemId);
 
+			if (isLegendMarker) {
+				onToggleSeriesOnOff(seriesIndex);
+				return;
+			}
+
+			onToggleSeriesVisibility(seriesIndex);
+		},
+		[onToggleSeriesVisibility, onToggleSeriesOnOff, getLegendItemIdFromEvent],
+	);
+
+	const onFocusSeries = useCallback(
+		(seriesIndex: number | null): void => {
+			if (rafId.current != null) {
+				cancelAnimationFrame(rafId.current);
+			}
+			rafId.current = requestAnimationFrame(() => {
+				setFocusedSeriesIndex(seriesIndex);
+				onFocusSeriesPlot(seriesIndex);
+			});
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[onFocusSeriesPlot],
+	);
+
+	const onLegendMouseMove = (e: React.MouseEvent<HTMLDivElement>): void => {
+		const legendItemId = getLegendItemIdFromEvent(e);
+		const seriesIndex = legendItemId ? Number(legendItemId) : null;
+		if (seriesIndex === focusedSeriesIndex) {
+			return;
+		}
+		onFocusSeries(seriesIndex);
+	};
+
+	const onLegendMouseLeave = useCallback(
+		(): void => {
+			// Cancel any pending RAF from handleFocusSeries to prevent race condition
+			if (rafId.current != null) {
+				cancelAnimationFrame(rafId.current);
+				rafId.current = null;
+			}
+			setFocusedSeriesIndex(null);
+			onFocusSeries(null);
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[onFocusSeries],
+	);
+
+	// Cleanup pending animation frames on unmount
+	useEffect(
+		() => (): void => {
+			if (rafId.current != null) {
+				cancelAnimationFrame(rafId.current);
+			}
+		},
+		[],
+	);
 	return {
-		onToggleSeries: onToggleSeriesOnOff,
-		onShowOnlySeries,
-		onShowSeries,
-		onHoverSeries,
+		onLegendClick,
+		onFocusSeries,
+		onLegendMouseMove,
+		onLegendMouseLeave,
 	};
 }

frontend/src/lib/visualization/charts/Pie/Pie.tsx

@@ -45,10 +45,9 @@ export default function Pie({
 		visibleData,
 		legendItems,
 		focusedSeriesIndex,
-		onToggleSeries,
-		onShowOnlySeries,
-		onShowSeries,
-		onHoverSeries,
+		onLegendClick,
+		onLegendMouseMove,
+		onLegendMouseLeave,
 	} = usePieInteractions(data, id);
 
 	const {
@@ -228,10 +227,9 @@ export default function Pie({
 					position={position}
 					averageLegendWidth={averageLegendWidth}
 					focusedSeriesIndex={focusedSeriesIndex}
-					onToggleSeries={onToggleSeries}
-					onShowOnlySeries={onShowOnlySeries}
-					onShowSeries={onShowSeries}
-					onHoverSeries={onHoverSeries}
+					onClick={onLegendClick}
+					onMouseMove={onLegendMouseMove}
+					onMouseLeave={onLegendMouseLeave}
 				/>
 			</div>
 		</div>

frontend/src/lib/visualization/charts/Pie/__tests__/Pie.test.tsx

@@ -100,29 +100,17 @@ describe('Pie', () => {
 		expect(screen.getByTestId('pie')).toHaveStyle({ flexDirection: 'column' });
 	});
 
-	it('isolates a slice when its legend row is clicked with everything showing', () => {
+	it('hides a slice when its legend marker is clicked', () => {
 		renderPie();
 		const svg = screen.getByTestId('pie').querySelector('svg') as SVGElement;
 		expect(svg.querySelectorAll('path')).toHaveLength(3);
 
-		fireEvent.click(screen.getByTestId('legend-item-1'));
-
-		// Nothing visible to exclude, so the click isolates: one arc left.
-		expect(svg.querySelectorAll('path')).toHaveLength(1);
-	});
-
-	it('excludes a slice when its legend row is clicked with others already hidden', () => {
-		renderPie();
-		const svg = screen.getByTestId('pie').querySelector('svg') as SVGElement;
-
-		// Isolate, then add a second slice back, so nothing is isolated any more.
-		fireEvent.click(screen.getByTestId('legend-item-1'));
-		fireEvent.click(screen.getByTestId('legend-add-0'));
-		expect(svg.querySelectorAll('path')).toHaveLength(2);
-
-		fireEvent.click(screen.getByTestId('legend-item-0'));
+		const marker = document.querySelector(
+			'[data-legend-item-id="1"] [data-is-legend-marker="true"]',
+		) as HTMLElement;
+		fireEvent.click(marker);
 
 		// One slice hidden → one fewer arc drawn.
-		expect(svg.querySelectorAll('path')).toHaveLength(1);
+		expect(svg.querySelectorAll('path')).toHaveLength(2);
 	});
 });

frontend/src/lib/visualization/charts/__tests__/utils.test.ts

@@ -1,9 +1,6 @@
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 
-import {
-	calculateAverageLegendWidth,
-	calculateChartDimensions,
-} from 'lib/visualization/charts/utils';
+import { calculateChartDimensions } from 'lib/visualization/charts/utils';
 
 const labels = (count: number, length = 20): string[] =>
 	Array.from({ length: count }, (_, i) =>
@@ -74,70 +71,41 @@ describe('calculateChartDimensions', () => {
 		expect(dims.width).toBe(180);
 	});
 
-	it('BOTTOM: items that fit one row reserve exactly one row', () => {
+	it('BOTTOM: a single row of items reserves one legend row', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 1000,
 			containerHeight: 500,
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(3),
 		});
-		// One 28px row + the wrapper's 12px bottom padding.
+		// One row = line height (28) + padding (12).
 		expect(dims.legendHeight).toBe(40);
 		expect(dims.height).toBe(460);
 		expect(dims.legendWidth).toBe(1000);
 	});
 
-	it('BOTTOM: more items than one row reserve exactly two rows', () => {
+	it('BOTTOM: many items cap at two rows on a tall container', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 1000,
 			containerHeight: 500,
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(40),
 		});
-		// Two 28px rows + the 2px row gap + 12px bottom padding — no room for a
-		// clipped third row, and none left over.
-		expect(dims.legendHeight).toBe(70);
-		expect(dims.height).toBe(430);
+		// Two rows = 2 * 40 - 12 (no trailing padding) = 68, under the 80px cap.
+		expect(dims.legendHeight).toBe(68);
+		expect(dims.height).toBe(432);
 	});
 
-	it('BOTTOM: items one past a row still reserve two rows', () => {
-		// 1000px wide fits 5 of these per row, so 6 items need a second row.
+	it('BOTTOM: on a short container the legend never takes more than 30% of the height', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 1000,
-			containerHeight: 500,
-			legendConfig: { position: LegendPosition.BOTTOM },
-			seriesLabels: labels(6),
-		});
-		expect(dims.legendHeight).toBe(70);
-	});
-
-	it('BOTTOM: drops to a single row rather than take half a short panel', () => {
-		const dims = calculateChartDimensions({
-			containerWidth: 1000,
-			containerHeight: 120,
+			containerHeight: 160,
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(40),
 		});
-		// A whole row goes rather than a clipped one being reserved.
-		expect(dims.legendHeight).toBe(40);
-		expect(dims.height).toBe(80);
-	});
-});
-
-describe('calculateAverageLegendWidth', () => {
-	it('scales with the label length', () => {
-		// 16px of chrome + 30 chars at 8px.
-		expect(calculateAverageLegendWidth(labels(4, 30))).toBe(256);
-	});
-
-	it('never drops below what a row needs to contain its hover actions', () => {
-		// Short or unnamed series would otherwise size a column the actions
-		// escape, spilling over the item beside it.
-		expect(calculateAverageLegendWidth(['cpu'])).toBe(90);
-		expect(calculateAverageLegendWidth([''])).toBe(90);
-	});
-
-	it('keeps the default estimate when there are no labels to measure', () => {
-		expect(calculateAverageLegendWidth([])).toBe(120);
+		// Without the height-relative cap the legend would take 68px of a 160px
+		// panel and the chart (pie especially) collapses to a sliver.
+		expect(dims.legendHeight).toBe(48); // 30% of 160
+		expect(dims.height).toBe(112);
 	});
 });

frontend/src/lib/visualization/charts/utils.ts

@@ -1,10 +1,4 @@
-import {
-	LEGEND_MAX_BOTTOM_ROWS,
-	MIN_LEGEND_ITEM_WIDTH,
-	LEGEND_ROW_GAP,
-	LEGEND_ROW_HEIGHT,
-	MAX_LEGEND_WIDTH,
-} from 'lib/uPlotV2/components/Legend/constants';
+import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 export interface ChartDimensions {
 	width: number;
@@ -19,8 +13,7 @@ const LEGEND_WIDTH_PERCENTILE = 0.85;
 const DEFAULT_AVG_LABEL_LENGTH = 15;
 const BASE_LEGEND_WIDTH = 16;
 const LEGEND_PADDING = 12;
-// Two rows are worth having, but not at the cost of half the panel.
-const MAX_SHORT_PANEL_LEGEND_RATIO = 0.5;
+const LEGEND_LINE_HEIGHT = 28;
 
 // RIGHT legend is a vertical column with its own width budget (cap protects the donut).
 const MAX_RIGHT_LEGEND_WIDTH = 320;
@@ -30,16 +23,12 @@ const RIGHT_LEGEND_RESERVED_WIDTH = 40;
 
 /**
  * Calculates the average width of the legend items based on the labels of the series.
- * Never returns less than a legend row needs to hold its own hover actions.
  * @param legends - The labels of the series.
  * @returns The average width of the legend items.
  */
 export function calculateAverageLegendWidth(legends: string[]): number {
 	if (legends.length === 0) {
-		return Math.max(
-			MIN_LEGEND_ITEM_WIDTH,
-			DEFAULT_AVG_LABEL_LENGTH * AVG_CHAR_WIDTH,
-		);
+		return DEFAULT_AVG_LABEL_LENGTH * AVG_CHAR_WIDTH;
 	}
 
 	const lengths = legends.map((l) => l.length).sort((a, b) => a - b);
@@ -47,10 +36,7 @@ export function calculateAverageLegendWidth(legends: string[]): number {
 	const index = Math.ceil(LEGEND_WIDTH_PERCENTILE * lengths.length) - 1;
 	const percentileLength = lengths[Math.max(0, index)];
 
-	return Math.max(
-		MIN_LEGEND_ITEM_WIDTH,
-		BASE_LEGEND_WIDTH + percentileLength * AVG_CHAR_WIDTH,
-	);
+	return BASE_LEGEND_WIDTH + percentileLength * AVG_CHAR_WIDTH;
 }
 
 /**
@@ -66,9 +52,7 @@ export function calculateAverageLegendWidth(legends: string[]): number {
  *   - Chart width is `containerWidth - legendWidth`.
  * - BOTTOM legend:
  *   - Computes how many items fit per row, then uses at most 2 rows.
- *   - `legendHeight` is exactly those rows plus the wrapper's bottom padding, so
- *     the rectangle never clips a row or reserves space for half of one. Two
- *     rows that would take half a short panel fall back to one row.
+ *   - `legendHeight` is derived from row count, capped by both a fixed pixel max and a % of container height.
  *   - Chart height is `containerHeight - legendHeight`, never below 0.
  * - `legendsPerSet` is the number of legend items that fit horizontally, based on the same text-width approximation.
  *
@@ -131,6 +115,8 @@ export function calculateChartDimensions({
 		};
 	}
 
+	const legendRowHeight = LEGEND_LINE_HEIGHT + LEGEND_PADDING;
+
 	const legendItemWidth = Math.ceil(
 		Math.min(approxLegendItemWidth, MAX_LEGEND_WIDTH),
 	);
@@ -139,30 +125,30 @@ export function calculateChartDimensions({
 		Math.floor((containerWidth - LEGEND_PADDING * 2) / legendItemWidth),
 	);
 
-	// The wrapper's bottom padding is inside this height (border-box).
-	const heightForRows = (rowCount: number): number =>
-		rowCount * LEGEND_ROW_HEIGHT +
-		(rowCount - 1) * LEGEND_ROW_GAP +
-		LEGEND_PADDING;
-
-	const neededRowCount = Math.max(
-		1,
-		Math.min(
-			LEGEND_MAX_BOTTOM_ROWS,
-			Math.ceil(legendItemCount / legendItemsPerRow),
-		),
+	const legendRowCount = Math.min(
+		2,
+		Math.ceil(legendItemCount / legendItemsPerRow),
 	);
 
-	// Without this, short grid panels hand most of their area to the legend and
-	// the chart — the pie donut especially — collapses to a sliver. Dropping a
-	// whole row beats clipping one.
-	const legendRowCount =
-		neededRowCount > 1 &&
-		heightForRows(neededRowCount) > containerHeight * MAX_SHORT_PANEL_LEGEND_RATIO
-			? 1
-			: neededRowCount;
+	const idealBottomLegendHeight =
+		legendRowCount > 1
+			? legendRowCount * legendRowHeight - LEGEND_PADDING
+			: legendRowHeight;
 
-	const bottomLegendHeight = heightForRows(legendRowCount);
+	// Cap at two rows / 80px, and never more than 30% of the container height
+	// (the doc above always promised the %-cap; without it, short grid panels
+	// hand most of their area to the legend and the chart — the pie donut
+	// especially — collapses to a sliver). 30% mirrors the RIGHT-legend width cap.
+	const maxAllowedLegendHeight = Math.min(
+		2 * legendRowHeight,
+		80,
+		Math.floor(containerHeight * 0.3),
+	);
+
+	const bottomLegendHeight = Math.min(
+		idealBottomLegendHeight,
+		maxAllowedLegendHeight,
+	);
 
 	return {
 		width: containerWidth,

frontend/src/lib/visualization/hooks/__tests__/usePieInteractions.test.tsx

@@ -3,6 +3,7 @@ import {
 	getStoredSeriesVisibility,
 	updateSeriesVisibilityToLocalStorage,
 } from 'lib/visualization/panels/utils/legendVisibilityUtils';
+import type { MouseEvent } from 'react';
 
 import { PieSlice } from 'lib/visualization/charts/types';
 import { usePieInteractions } from 'lib/visualization/hooks/usePieInteractions';
@@ -23,6 +24,22 @@ const DATA: PieSlice[] = [
 	{ label: 'checkout', value: 40, color: '#c' },
 ];
 
+// Builds a fake legend click/move event: `e.target.closest('[data-legend-item-id]')`
+// resolves to the item at `index`, and `e.target.dataset.isLegendMarker` flags marker clicks.
+function legendEvent(
+	index: number | null,
+	isMarker = false,
+): MouseEvent<HTMLDivElement> {
+	const itemEl =
+		index == null ? null : { dataset: { legendItemId: String(index) } };
+	return {
+		target: {
+			closest: (): unknown => itemEl,
+			dataset: { isLegendMarker: isMarker ? 'true' : undefined },
+		},
+	} as unknown as MouseEvent<HTMLDivElement>;
+}
+
 describe('usePieInteractions', () => {
 	beforeEach(() => {
 		mockGetStored.mockReturnValue(null);
@@ -42,11 +59,11 @@ describe('usePieInteractions', () => {
 		expect(result.current.active).toBeNull();
 	});
 
-	describe('row toggle', () => {
+	describe('marker click (toggle one)', () => {
 		it('hides then unhides the clicked slice', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA, 'panel-1'));
 
-			act(() => result.current.onToggleSeries(1));
+			act(() => result.current.onLegendClick(legendEvent(1, true)));
 
 			expect(result.current.visibleData).toStrictEqual([DATA[0], DATA[2]]);
 			expect(result.current.legendItems[1].show).toBe(false);
@@ -56,30 +73,18 @@ describe('usePieInteractions', () => {
 				{ label: 'checkout', show: true },
 			]);
 
-			act(() => result.current.onToggleSeries(1));
+			act(() => result.current.onLegendClick(legendEvent(1, true)));
 
 			expect(result.current.visibleData).toStrictEqual(DATA);
 			expect(result.current.legendItems[1].show).toBe(true);
 		});
 	});
 
-	describe('the last slice showing', () => {
-		it('cannot be hidden', () => {
+	describe('label click (isolate / reset)', () => {
+		it('isolates the clicked slice, then resets on a second click', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
 
-			act(() => result.current.onShowOnlySeries(0));
-			act(() => result.current.onToggleSeries(0));
-
-			// An empty donut is never a state worth reaching.
-			expect(result.current.visibleData).toStrictEqual([DATA[0]]);
-		});
-	});
-
-	describe('Only', () => {
-		it('isolates the slice, then shows everything on a second click', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() => result.current.onShowOnlySeries(0));
+			act(() => result.current.onLegendClick(legendEvent(0, false)));
 
 			expect(result.current.visibleData).toStrictEqual([DATA[0]]);
 			expect(result.current.legendItems.map((i) => i.show)).toStrictEqual([
@@ -88,64 +93,21 @@ describe('usePieInteractions', () => {
 				false,
 			]);
 
-			act(() => result.current.onShowOnlySeries(0));
+			act(() => result.current.onLegendClick(legendEvent(0, false)));
 
 			expect(result.current.visibleData).toStrictEqual(DATA);
 		});
-
-		it('switches the isolation to another slice', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() => result.current.onShowOnlySeries(0));
-			act(() => result.current.onShowOnlySeries(2));
-
-			expect(result.current.visibleData).toStrictEqual([DATA[2]]);
-		});
-
-		it('shows everything when the last remaining slice was hidden one by one', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			// Hiding down to one slice must behave exactly like isolating it.
-			act(() => result.current.onToggleSeries(1));
-			act(() => result.current.onToggleSeries(2));
-			act(() => result.current.onShowOnlySeries(0));
-
-			expect(result.current.visibleData).toStrictEqual(DATA);
-		});
-	});
-
-	describe('Add', () => {
-		it('shows a slice alongside the isolated one', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() => result.current.onShowOnlySeries(0));
-			act(() => result.current.onShowSeries(2));
-
-			expect(result.current.visibleData).toStrictEqual([DATA[0], DATA[2]]);
-		});
 	});
 
 	describe('hover', () => {
 		it('focuses the hovered slice and clears on leave', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
 
-			act(() => result.current.onHoverSeries(2));
+			act(() => result.current.onLegendMouseMove(legendEvent(2)));
 			expect(result.current.active).toStrictEqual(DATA[2]);
 			expect(result.current.focusedSeriesIndex).toBe(2);
 
-			act(() => result.current.onHoverSeries(null));
-			expect(result.current.active).toBeNull();
-			expect(result.current.focusedSeriesIndex).toBeNull();
-		});
-
-		it('drops the focus when the focused slice is hidden', () => {
-			const { result } = renderHook(() => usePieInteractions(DATA));
-
-			act(() => result.current.onHoverSeries(1));
-			act(() => result.current.onToggleSeries(1));
-
-			// Otherwise every remaining arc stays dimmed and the donut reads as an
-			// isolation instead of one slice being excluded.
+			act(() => result.current.onLegendMouseLeave());
 			expect(result.current.active).toBeNull();
 			expect(result.current.focusedSeriesIndex).toBeNull();
 		});
@@ -153,8 +115,8 @@ describe('usePieInteractions', () => {
 		it('does not focus a hidden slice', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
 
-			act(() => result.current.onToggleSeries(1));
-			act(() => result.current.onHoverSeries(1));
+			act(() => result.current.onLegendClick(legendEvent(1, true))); // hide cart
+			act(() => result.current.onLegendMouseMove(legendEvent(1)));
 
 			expect(result.current.active).toBeNull();
 		});
@@ -163,7 +125,7 @@ describe('usePieInteractions', () => {
 	describe('persistence', () => {
 		it('does not write to storage when no id is provided', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
-			act(() => result.current.onToggleSeries(0));
+			act(() => result.current.onLegendClick(legendEvent(0, true)));
 			expect(mockUpdateStored).not.toHaveBeenCalled();
 		});
 

frontend/src/lib/visualization/hooks/usePieInteractions.ts

@@ -1,8 +1,7 @@
 import { LegendItem } from 'lib/uPlotV2/config/types';
-import type { Dispatch, SetStateAction } from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { Dispatch, MouseEvent, SetStateAction } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { getShownSeriesState } from 'lib/uPlotV2/components/Legend/utils';
 import {
 	getStoredSeriesVisibility,
 	updateSeriesVisibilityToLocalStorage,
@@ -19,17 +18,27 @@ export interface UsePieInteractionsResult {
 	legendItems: LegendItem[];
 	/** Index of the active slice for the legend's focus highlight, or null. */
 	focusedSeriesIndex: number | null;
-	onToggleSeries: (sliceIndex: number) => void;
-	onShowOnlySeries: (sliceIndex: number) => void;
-	onShowSeries: (sliceIndex: number) => void;
-	onHoverSeries: (sliceIndex: number | null) => void;
+	onLegendClick: (e: MouseEvent<HTMLDivElement>) => void;
+	onLegendMouseMove: (e: MouseEvent<HTMLDivElement>) => void;
+	onLegendMouseLeave: () => void;
+}
+
+// Reads the slice index off the nearest `[data-legend-item-id]` ancestor of the
+// event target (the shared Legend tags each item with its seriesIndex).
+function getLegendIndex(e: MouseEvent<HTMLDivElement>): number | null {
+	const el = (e.target as HTMLElement | null)?.closest<HTMLElement>(
+		'[data-legend-item-id]',
+	);
+	const id = el?.dataset.legendItemId;
+	return id != null ? Number(id) : null;
 }
 
 /**
- * Pie interaction + derived state: hover/focus, slice hide/show driven by the
- * shared legend's actions, and persistence of the hidden set to localStorage
- * (keyed by `id`, matched by label) so it survives reloads. Returns the visible
- * slices, legend items, focus index, and the legend handlers.
+ * Pie interaction + derived state: hover/focus, slice hide/unhide (mirroring the
+ * uPlot legend — marker toggles one, label isolates), and persistence of the
+ * hidden set to localStorage (keyed by `id`, matched by label) so it survives
+ * reloads. Returns the visible slices, legend items, focus index, and the
+ * legend container handlers.
  */
 export function usePieInteractions(
 	data: PieSlice[],
@@ -39,6 +48,7 @@ export function usePieInteractions(
 	const [hiddenIndices, setHiddenIndices] = useState<Set<number>>(
 		() => new Set(),
 	);
+	const isolatedIndexRef = useRef<number | null>(null);
 
 	const legendItems = useMemo<LegendItem[]>(
 		() =>
@@ -94,79 +104,65 @@ export function usePieInteractions(
 		[id, data],
 	);
 
-	const onHoverSeries = useCallback(
-		(sliceIndex: number | null): void => {
+	const onLegendMouseMove = useCallback(
+		(e: MouseEvent<HTMLDivElement>): void => {
+			const index = getLegendIndex(e);
 			// Don't focus/dim for hidden slices — they aren't on the donut.
-			setActive(
-				sliceIndex != null && !hiddenIndices.has(sliceIndex)
-					? data[sliceIndex]
-					: null,
-			);
+			setActive(index != null && !hiddenIndices.has(index) ? data[index] : null);
 		},
 		[data, hiddenIndices],
 	);
 
-	const onToggleSeries = useCallback(
-		(sliceIndex: number): void => {
-			const next = new Set(hiddenIndices);
-			if (next.has(sliceIndex)) {
-				next.delete(sliceIndex);
-			} else {
-				// An empty donut is never worth reaching.
-				if (data.length - next.size <= 1) {
-					return;
-				}
-				next.add(sliceIndex);
+	// Marker click toggles just that slice on/off; label click isolates it
+	// (clicking the isolated one again resets to all) — mirrors the uPlot legend.
+	const onLegendClick = useCallback(
+		(e: MouseEvent<HTMLDivElement>): void => {
+			const index = getLegendIndex(e);
+			if (index == null) {
+				return;
 			}
-			applyHidden(next);
-		},
-		[data.length, hiddenIndices, applyHidden],
-	);
+			const isMarker = (e.target as HTMLElement).dataset.isLegendMarker;
 
-	const onShowOnlySeries = useCallback(
-		(sliceIndex: number): void => {
-			const { soleShownSeriesIndex } = getShownSeriesState(legendItems);
-			if (soleShownSeriesIndex === sliceIndex) {
-				applyHidden(new Set());
+			if (isMarker) {
+				const next = new Set(hiddenIndices);
+				if (next.has(index)) {
+					next.delete(index);
+				} else {
+					next.add(index);
+				}
+				applyHidden(next);
 				return;
 			}
 
+			const isReset = isolatedIndexRef.current === index;
+			isolatedIndexRef.current = isReset ? null : index;
+			if (isReset) {
+				applyHidden(new Set());
+				return;
+			}
 			const next = new Set<number>();
-			data.forEach((_, index) => {
-				if (index !== sliceIndex) {
-					next.add(index);
+			data.forEach((_, i) => {
+				if (i !== index) {
+					next.add(i);
 				}
 			});
 			applyHidden(next);
 		},
-		[data, legendItems, applyHidden],
+		[data, hiddenIndices, applyHidden],
 	);
 
-	const onShowSeries = useCallback(
-		(sliceIndex: number): void => {
-			const next = new Set(hiddenIndices);
-			next.delete(sliceIndex);
-			applyHidden(next);
-		},
-		[hiddenIndices, applyHidden],
-	);
+	const onLegendMouseLeave = useCallback((): void => setActive(null), []);
 
-	const activeIndex = active ? data.indexOf(active) : -1;
-	// Left active, a hidden slice keeps every other arc dimmed, which reads as an
-	// isolation rather than as one slice being excluded.
-	const effectiveActive =
-		activeIndex >= 0 && !hiddenIndices.has(activeIndex) ? active : null;
-	const focusedIndex = effectiveActive ? activeIndex : -1;
+	const focusedIndex = active ? data.indexOf(active) : -1;
 
 	return {
-		active: effectiveActive,
+		active,
 		setActive,
 		visibleData,
 		legendItems,
 		focusedSeriesIndex: focusedIndex >= 0 ? focusedIndex : null,
-		onToggleSeries,
-		onShowOnlySeries,
-		onShowSeries,
-		onHoverSeries,
+		onLegendClick,
+		onLegendMouseMove,
+		onLegendMouseLeave,
 	};
 }

frontend/src/lib/visualization/layout/ChartLayout/ChartLayout.styles.scss

@@ -29,6 +29,7 @@
 		box-sizing: border-box;
 		min-height: 0;
 		overflow: hidden;
-		padding: 0 12px 12px 12px;
+		padding-left: 12px;
+		padding-bottom: 12px;
 	}
 }

frontend/src/lib/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
 import { calculateChartDimensions } from 'lib/visualization/charts/utils';
-import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/constants';
+import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 

frontend/src/providers/QueryBuilder.tsx

@@ -767,15 +767,10 @@ export function QueryBuilderProvider({
 							queryItem.dataSource
 						].builder.queryData;
 
-					// `dataSource` travels with the panel type's fields, but is appended to a
-					// copy: `propsRequired` is the list held in
-					// `panelTypeDataSourceFormValuesMap`, and pushing onto it grew that
-					// module-level array by one entry on every call.
-					if (propsRequired) {
-						[...propsRequired, 'dataSource'].forEach((p: any) => {
-							set(queryItem, p, get(newQueryItem, p));
-						});
-					}
+					propsRequired?.push('dataSource');
+					propsRequired?.forEach((p: any) => {
+						set(queryItem, p, get(newQueryItem, p));
+					});
 					return queryItem;
 				}
 

frontend/src/types/common/queryBuilder.ts

@@ -211,11 +211,13 @@ export enum QueryFunctionsTypes {
 	FILL_ZERO = 'fillZero',
 }
 
-/**
- * Key names of {@link PANEL_TYPES}. Derived rather than listed: the hand-written
- * version had fallen behind the enum by three members (`BAR`, `PIE`, `HISTOGRAM`).
- */
-export type PanelTypeKeys = keyof typeof PANEL_TYPES;
+export type PanelTypeKeys =
+	| 'TIME_SERIES'
+	| 'VALUE'
+	| 'TABLE'
+	| 'LIST'
+	| 'TRACE'
+	| 'EMPTY_WIDGET';
 
 export enum ReduceOperators {
 	LAST = 'last',

go.mod

@@ -57,6 +57,7 @@ require (
 	github.com/segmentio/analytics-go/v3 v3.2.1
 	github.com/sethvargo/go-password v0.2.0
 	github.com/smartystreets/goconvey v1.8.1
+	github.com/soheilhy/cmux v0.1.5
 	github.com/spf13/cobra v1.10.2
 	github.com/stretchr/testify v1.11.1
 	github.com/swaggest/jsonschema-go v0.3.78

go.sum

@@ -1057,6 +1057,8 @@ github.com/smartystreets/assertions v0.0.0-20180927180507-b2de0cb4f26d/go.mod h1
 github.com/smartystreets/goconvey v1.6.4/go.mod h1:syvi0/a8iFYH4r/RixwvyeAJjdLS9QV7WQ/tjFTllLA=
 github.com/smartystreets/goconvey v1.8.1 h1:qGjIddxOk4grTu9JPOU31tVfq3cNdBlNa5sSznIX1xY=
 github.com/smartystreets/goconvey v1.8.1/go.mod h1:+/u4qLyY6x1jReYOp7GOM2FSt8aP9CzCZL03bI28W60=
+github.com/soheilhy/cmux v0.1.5 h1:jjzc5WVemNEDTLwv9tlmemhC73tI08BNOIGwBOo10Js=
+github.com/soheilhy/cmux v0.1.5/go.mod h1:T7TcVDs9LWfQgPlPsdngu6I6QIoyIFZDDC6sNE1GqG0=
 github.com/sourcegraph/conc v0.3.0 h1:OQTbbt6P72L20UqAkXXuLOj79LfEanQ+YQFNpLA9ySo=
 github.com/sourcegraph/conc v0.3.0/go.mod h1:Sdozi7LEKbFPqYX2/J+iBAM6HpqSLTASQIKqDmF7Mt0=
 github.com/spaolacci/murmur3 v0.0.0-20180118202830-f09979ecbc72/go.mod h1:JwIasOWyU6f++ZhiEuf87xNszmSA2myDM2Kzu9HwQUA=
@@ -1491,6 +1493,7 @@ golang.org/x/net v0.0.0-20200822124328-c89045814202/go.mod h1:/O7V0waA8r7cgGh81R
 golang.org/x/net v0.0.0-20201021035429-f5854403a974/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
 golang.org/x/net v0.0.0-20201031054903-ff519b6c9102/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
 golang.org/x/net v0.0.0-20201110031124-69a78807bb2b/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
+golang.org/x/net v0.0.0-20201202161906-c7110b5ffcbb/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
 golang.org/x/net v0.0.0-20201209123823-ac852fbbde11/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.0.0-20201224014010-6772e930b67b/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.0.0-20210119194325-5f4716e94777/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=

pkg/apiserver/apiserver.go

@@ -1,14 +1,10 @@
 package apiserver
 
 import (
-	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/gorilla/mux"
 )
 
 type APIServer interface {
-	// APIServer is a long running service serving the SigNoz API.
-	factory.ServiceWithHealthy
-
 	// Returns the mux router for the API server. Primarily used for collecting OpenAPI operations.
 	Router() *mux.Router
 

pkg/apiserver/config.go

@@ -3,16 +3,13 @@ package apiserver
 import (
 	"time"
 
-	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
-	httpserver "github.com/SigNoz/signoz/pkg/http/server"
 )
 
 // Config holds the configuration for config.
 type Config struct {
-	httpserver.Config `mapstructure:",squash" yaml:",squash"`
-	Timeout           Timeout `mapstructure:"timeout"`
-	Logging           Logging `mapstructure:"logging"`
+	Timeout Timeout `mapstructure:"timeout"`
+	Logging Logging `mapstructure:"logging"`
 }
 
 type Timeout struct {
@@ -35,10 +32,6 @@ func NewConfigFactory() factory.ConfigFactory {
 
 func newConfig() factory.Config {
 	return &Config{
-		Config: httpserver.Config{
-			Address:     "0.0.0.0:8080",
-			ReadTimeout: 60 * time.Second,
-		},
 		Timeout: Timeout{
 			Default: 60 * time.Second,
 			Max:     600 * time.Second,
@@ -59,13 +52,5 @@ func newConfig() factory.Config {
 }
 
 func (c Config) Validate() error {
-	if err := c.Config.Validate(); err != nil {
-		return err
-	}
-
-	if c.Address == "" {
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "apiserver.address is required")
-	}
-
 	return nil
 }

pkg/apiserver/config_test.go

@@ -8,18 +8,11 @@ import (
 	"github.com/SigNoz/signoz/pkg/config"
 	"github.com/SigNoz/signoz/pkg/config/envprovider"
 	"github.com/SigNoz/signoz/pkg/factory"
-	httpserver "github.com/SigNoz/signoz/pkg/http/server"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 )
 
 func TestNewWithEnvProvider(t *testing.T) {
-	t.Setenv("SIGNOZ_APISERVER_ADDRESS", "0.0.0.0:9090")
-	t.Setenv("SIGNOZ_APISERVER_READ__TIMEOUT", "80s")
-	t.Setenv("SIGNOZ_APISERVER_TLS_ENABLED", "true")
-	t.Setenv("SIGNOZ_APISERVER_TLS_CERT__FILE", "/etc/signoz/server.crt")
-	t.Setenv("SIGNOZ_APISERVER_TLS_KEY__FILE", "/etc/signoz/server.key")
-	t.Setenv("SIGNOZ_APISERVER_TLS_MIN__VERSION", "1.3")
 	t.Setenv("SIGNOZ_APISERVER_TIMEOUT_DEFAULT", "70s")
 	t.Setenv("SIGNOZ_APISERVER_TIMEOUT_MAX", "700s")
 	t.Setenv("SIGNOZ_APISERVER_TIMEOUT_EXCLUDED__ROUTES", "/excluded1,/excluded2")
@@ -45,16 +38,6 @@ func TestNewWithEnvProvider(t *testing.T) {
 	require.NoError(t, err)
 
 	expected := &Config{
-		Config: httpserver.Config{
-			Address:     "0.0.0.0:9090",
-			ReadTimeout: 80 * time.Second,
-			TLS: httpserver.TLS{
-				Enabled:    true,
-				CertFile:   "/etc/signoz/server.crt",
-				KeyFile:    "/etc/signoz/server.key",
-				MinVersion: "1.3",
-			},
-		},
 		Timeout: Timeout{
 			Default: 70 * time.Second,
 			Max:     700 * time.Second,

pkg/apiserver/signozapiserver/provider.go

@@ -2,11 +2,9 @@ package signozapiserver
 
 import (
 	"context"
-	"net/http"
 
 	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/apiserver"
-	"github.com/SigNoz/signoz/pkg/auditor"
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/flagger"
@@ -14,8 +12,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/http/handler"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
-	httpserver "github.com/SigNoz/signoz/pkg/http/server"
-	"github.com/SigNoz/signoz/pkg/identn"
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/modules/aiobservability"
 	"github.com/SigNoz/signoz/pkg/modules/authdomain"
@@ -41,22 +37,18 @@ import (
 	"github.com/SigNoz/signoz/pkg/prometheus"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/ruler"
-	"github.com/SigNoz/signoz/pkg/sharder"
 	"github.com/SigNoz/signoz/pkg/statsreporter"
 	"github.com/SigNoz/signoz/pkg/subscription"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/web"
 	"github.com/SigNoz/signoz/pkg/zeus"
 	"github.com/gorilla/mux"
 )
 
 type provider struct {
-	globalConfig               global.Config
-	web                        web.Web
+	config                     apiserver.Config
+	settings                   factory.ScopedProviderSettings
 	router                     *mux.Router
-	httpServer                 *httpserver.Server
-	healthyC                   chan struct{}
 	authzMiddleware            *middleware.AuthZ
 	authzService               authz.AuthZ
 	orgHandler                 organization.Handler
@@ -140,11 +132,6 @@ func NewFactory(
 	rulerHandler ruler.Handler,
 	statsHandler statsreporter.Handler,
 	savedViewHandler savedview.Handler,
-	globalConfig global.Config,
-	identNResolver identn.IdentNResolver,
-	sharder sharder.Sharder,
-	auditor auditor.Auditor,
-	web web.Web,
 	quickFilterModule quickfilter.Module,
 	quickFilterHandler quickfilter.Handler,
 ) factory.ProviderFactory[apiserver.APIServer, apiserver.Config] {
@@ -192,11 +179,6 @@ func NewFactory(
 			rulerHandler,
 			statsHandler,
 			savedViewHandler,
-			globalConfig,
-			identNResolver,
-			sharder,
-			auditor,
-			web,
 			quickFilterModule,
 			quickFilterHandler,
 		)
@@ -246,11 +228,6 @@ func newProvider(
 	rulerHandler ruler.Handler,
 	statsHandler statsreporter.Handler,
 	savedViewHandler savedview.Handler,
-	globalConfig global.Config,
-	identNResolver identn.IdentNResolver,
-	sharder sharder.Sharder,
-	auditor auditor.Auditor,
-	web web.Web,
 	quickFilterModule quickfilter.Module,
 	quickFilterHandler quickfilter.Handler,
 ) (apiserver.APIServer, error) {
@@ -258,10 +235,9 @@ func newProvider(
 	router := mux.NewRouter().UseEncodedPath()
 
 	provider := &provider{
-		globalConfig:               globalConfig,
-		web:                        web,
+		config:                     config,
+		settings:                   settings,
 		router:                     router,
-		healthyC:                   make(chan struct{}),
 		orgHandler:                 orgHandler,
 		userHandler:                userHandler,
 		authzService:               authzService,
@@ -306,68 +282,13 @@ func newProvider(
 
 	provider.authzMiddleware = middleware.NewAuthZ(settings.Logger(), orgGetter, authzService)
 
-	router.Use(middleware.NewRecovery(settings.Logger()).Wrap)
-	router.Use(middleware.NewOtel("apiserver", providerSettings.MeterProvider, providerSettings.TracerProvider).Wrap)
-	router.Use(middleware.NewIdentN(identNResolver, sharder, settings.Logger()).Wrap)
-	router.Use(middleware.NewTimeout(settings.Logger(),
-		config.Timeout.ExcludedRoutes,
-		config.Timeout.Default,
-		config.Timeout.Max,
-	).Wrap)
-	router.Use(middleware.NewResource(settings.Logger()).Wrap)
-	router.Use(middleware.NewAudit(settings.Logger(), config.Logging.ExcludedRoutes, auditor).Wrap)
-	router.Use(middleware.NewComment().Wrap)
-
 	if err := provider.AddToRouter(router); err != nil {
 		return nil, err
 	}
 
-	httpHandler := middleware.NewCors().Wrap(router)
-	httpHandler = middleware.NewCompress().Wrap(httpHandler)
-
-	routePrefix := globalConfig.ExternalPath()
-	if routePrefix != "" {
-		prefixed := http.StripPrefix(routePrefix, httpHandler)
-		httpHandler = http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
-			switch req.URL.Path {
-			case "/api/v1/health", "/api/v2/healthz", "/api/v2/readyz", "/api/v2/livez":
-				router.ServeHTTP(w, req)
-				return
-			}
-
-			prefixed.ServeHTTP(w, req)
-		})
-	}
-
-	httpServer, err := httpserver.New(settings.Logger(), config.Config, httpHandler)
-	if err != nil {
-		return nil, err
-	}
-	provider.httpServer = httpServer
-
 	return provider, nil
 }
 
-func (provider *provider) Start(ctx context.Context) error {
-	// Mount the web routes last so the catch-all prefix does not shadow API
-	// routes registered on the router after construction.
-	if err := provider.web.AddToRouter(provider.router); err != nil {
-		return err
-	}
-
-	close(provider.healthyC)
-
-	return provider.httpServer.Start(ctx)
-}
-
-func (provider *provider) Stop(ctx context.Context) error {
-	return provider.httpServer.Stop(ctx)
-}
-
-func (provider *provider) Healthy() <-chan struct{} {
-	return provider.healthyC
-}
-
 func (provider *provider) Router() *mux.Router {
 	return provider.router
 }

pkg/contextlinks/links.go

@@ -12,25 +12,32 @@ import (
 
 // PrepareParamsForTracesV5 returns the traces explorer query params for the
 // given range and filter; the traces explorer writes its time params in
-// nanoseconds.
-func PrepareParamsForTracesV5(start, end time.Time, whereClause string) url.Values {
-	return prepareExplorerParams("traces", start.UnixNano(), end.UnixNano(), whereClause)
+// nanoseconds. queryType is builder_ai_query for the AI observability explorer.
+func PrepareParamsForTracesV5(start, end time.Time, whereClause string, queryType qbtypes.QueryType) url.Values {
+	return prepareExplorerParams("traces", queryType, start.UnixNano(), end.UnixNano(), whereClause)
 }
 
 // PrepareParamsForLogsV5 returns the logs explorer query params for the given
 // range and filter; the logs explorer writes its time params in milliseconds.
 func PrepareParamsForLogsV5(start, end time.Time, whereClause string) url.Values {
-	return prepareExplorerParams("logs", start.UnixMilli(), end.UnixMilli(), whereClause)
+	return prepareExplorerParams("logs", qbtypes.QueryTypeBuilder, start.UnixMilli(), end.UnixMilli(), whereClause)
 }
 
 // The end link is double encoded because otherwise a filter expression with `%` somewhere in it breaks.
-func prepareExplorerParams(dataSource string, start, end int64, whereClause string) url.Values {
+func prepareExplorerParams(dataSource string, queryType qbtypes.QueryType, start, end int64, whereClause string) url.Values {
+	// builder_query is the explorer default, so it is left out to keep existing links unchanged
+	builderQueryType := ""
+	if queryType != qbtypes.QueryTypeBuilder {
+		builderQueryType = queryType.StringValue()
+	}
+
 	urlData := URLShareableCompositeQuery{
 		QueryType: "builder",
 		Builder: URLShareableBuilderQuery{
 			QueryData: []LinkQuery{{
-				DataSource: dataSource,
-				Filter:     &FilterExpression{Expression: whereClause},
+				DataSource:       dataSource,
+				BuilderQueryType: builderQueryType,
+				Filter:           &FilterExpression{Expression: whereClause},
 			}},
 			QueryFormulas: make([]string, 0),
 		},
@@ -47,7 +54,8 @@ func prepareExplorerParams(dataSource string, start, end int64, whereClause stri
 
 // BuilderQueryForSignal returns the filter expression and group-by keys of the
 // builder query for the given signal, or found=false when the composite query
-// has no builder query for it (e.g. PromQL or ClickHouse SQL alerts).
+// has no builder query for it (e.g. PromQL or ClickHouse SQL alerts). AI trace
+// queries (builder_ai_query) count as trace builder queries.
 // TODO(srikanthccv): re-visit this and support multiple queries.
 func BuilderQueryForSignal(queries []qbtypes.QueryEnvelope, signal telemetrytypes.Signal) (string, []qbtypes.GroupByKey, bool) {
 	switch signal {
@@ -63,7 +71,7 @@ func builderQueryForSignal[T any](queries []qbtypes.QueryEnvelope, signal teleme
 	var q qbtypes.QueryBuilderQuery[T]
 	found := false
 	for _, query := range queries {
-		if query.Type != qbtypes.QueryTypeBuilder {
+		if query.Type != qbtypes.QueryTypeBuilder && query.Type != qbtypes.QueryTypeBuilderAI {
 			continue
 		}
 		if spec, ok := query.Spec.(qbtypes.QueryBuilderQuery[T]); ok {

pkg/contextlinks/links_test.go

@@ -30,6 +30,15 @@ func TestBuilderQueryForSignal(t *testing.T) {
 		Type: qbtypes.QueryTypePromQL,
 		Spec: qbtypes.PromQuery{Name: "C"},
 	}
+	aiTraceQuery := qbtypes.QueryEnvelope{
+		Type: qbtypes.QueryTypeBuilderAI,
+		Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
+			Name:    "D",
+			Signal:  telemetrytypes.SignalTraces,
+			Filter:  &qbtypes.Filter{Expression: "trace.input_tokens > 1000"},
+			GroupBy: []qbtypes.GroupByKey{{TelemetryFieldKey: telemetrytypes.TelemetryFieldKey{Name: "session.id"}}},
+		},
+	}
 
 	t.Run("logs query among mixed queries", func(t *testing.T) {
 		filterExpr, groupBy, found := BuilderQueryForSignal([]qbtypes.QueryEnvelope{promQuery, logQuery, traceQuery}, telemetrytypes.SignalLogs)
@@ -46,6 +55,14 @@ func TestBuilderQueryForSignal(t *testing.T) {
 		assert.Empty(t, groupBy)
 	})
 
+	t.Run("ai trace query counts as traces", func(t *testing.T) {
+		filterExpr, groupBy, found := BuilderQueryForSignal([]qbtypes.QueryEnvelope{logQuery, aiTraceQuery}, telemetrytypes.SignalTraces)
+		require.True(t, found)
+		assert.Equal(t, "trace.input_tokens > 1000", filterExpr)
+		require.Len(t, groupBy, 1)
+		assert.Equal(t, "session.id", groupBy[0].Name)
+	})
+
 	t.Run("no builder query for signal", func(t *testing.T) {
 		_, _, found := BuilderQueryForSignal([]qbtypes.QueryEnvelope{traceQuery}, telemetrytypes.SignalLogs)
 		assert.False(t, found)

pkg/contextlinks/types.go

@@ -13,8 +13,9 @@ type FilterExpression struct {
 // LinkQuery carries the only fields the explorer pages read from a shared
 // link; the frontend fills in the rest of the query shape with defaults.
 type LinkQuery struct {
-	DataSource string            `json:"dataSource"`
-	Filter     *FilterExpression `json:"filter,omitempty"`
+	DataSource       string            `json:"dataSource"`
+	BuilderQueryType string            `json:"builderQueryType,omitempty"`
+	Filter           *FilterExpression `json:"filter,omitempty"`
 }
 
 type URLShareableBuilderQuery struct {

pkg/factory/registry.go

@@ -78,40 +78,6 @@ func NewRegistry(ctx context.Context, logger *slog.Logger, services ...NamedServ
 	}, nil
 }
 
-// Add registers additional services into the registry. It must be called before Start.
-func (registry *Registry) Add(ctx context.Context, services ...NamedService) error {
-	added := make([]*serviceWithState, 0, len(services))
-	for _, s := range services {
-		if _, ok := registry.servicesByName[s.Name()]; ok {
-			return errors.Newf(errors.TypeInvalidInput, ErrCodeInvalidRegistry, "cannot add service, duplicate service name %q", s.Name())
-		}
-		added = append(added, newServiceWithState(s))
-	}
-
-	for _, ss := range added {
-		registry.services = append(registry.services, ss)
-		registry.servicesByName[ss.service.Name()] = ss
-	}
-
-	for _, ss := range added {
-		for _, dep := range ss.service.DependsOn() {
-			if dep == ss.service.Name() {
-				registry.logger.ErrorContext(ctx, "ignoring self-dependency", slog.Any("service", ss.service.Name()))
-				continue
-			}
-
-			if _, ok := registry.servicesByName[dep]; !ok {
-				registry.logger.ErrorContext(ctx, "ignoring unknown dependency", slog.Any("service", ss.service.Name()), slog.Any("dependency", dep))
-				continue
-			}
-
-			ss.dependsOn = append(ss.dependsOn, dep)
-		}
-	}
-
-	return detectCyclicDeps(registry.services)
-}
-
 func (registry *Registry) Start(ctx context.Context) {
 	for _, ss := range registry.services {
 		go func(ss *serviceWithState) {

pkg/factory/registry_test.go

@@ -342,61 +342,3 @@ func TestDependsOnCycleReturnsError(t *testing.T) {
 	assert.Error(t, err)
 	assert.Contains(t, err.Error(), "dependency cycles detected")
 }
-
-func TestRegistryAdd(t *testing.T) {
-	s1 := newTestService(t)
-	s2 := newTestService(t)
-
-	registry, err := NewRegistry(context.Background(), slog.New(slog.DiscardHandler), NewNamedService(MustNewName("s1"), s1))
-	require.NoError(t, err)
-
-	require.NoError(t, registry.Add(context.Background(), NewNamedService(MustNewName("s2"), s2)))
-
-	ctx := context.Background()
-	registry.Start(ctx)
-
-	require.NoError(t, registry.AwaitHealthy(ctx))
-	byState := registry.ServicesByState()
-	assert.Len(t, byState[StateRunning], 2)
-	assert.True(t, registry.IsHealthy())
-
-	assert.NoError(t, registry.Stop(ctx))
-}
-
-func TestRegistryAddDuplicateReturnsError(t *testing.T) {
-	s1 := newTestService(t)
-
-	registry, err := NewRegistry(context.Background(), slog.New(slog.DiscardHandler), NewNamedService(MustNewName("s1"), s1))
-	require.NoError(t, err)
-
-	err = registry.Add(context.Background(), NewNamedService(MustNewName("s1"), newTestService(t)))
-	assert.Error(t, err)
-	assert.Contains(t, err.Error(), "duplicate service name")
-}
-
-func TestRegistryAddWithDependency(t *testing.T) {
-	s1 := newHealthyTestService(t)
-	s2 := newTestService(t)
-
-	registry, err := NewRegistry(context.Background(), slog.New(slog.DiscardHandler), NewNamedService(MustNewName("s1"), s1))
-	require.NoError(t, err)
-
-	// s2 depends on the already registered s1.
-	require.NoError(t, registry.Add(context.Background(), NewNamedService(MustNewName("s2"), s2, MustNewName("s1"))))
-
-	ctx := context.Background()
-	registry.Start(ctx)
-
-	// s2 stays in STARTING until s1 is healthy.
-	require.Eventually(t, func() bool {
-		byState := registry.ServicesByState()
-		return len(byState[StateStarting]) == 2
-	}, time.Second, time.Millisecond)
-
-	close(s1.healthyC)
-
-	require.NoError(t, registry.AwaitHealthy(ctx))
-	assert.True(t, registry.IsHealthy())
-
-	assert.NoError(t, registry.Stop(ctx))
-}

pkg/http/middleware/compress.go

@@ -1,17 +0,0 @@
-package middleware
-
-import (
-	"net/http"
-
-	gorillahandlers "github.com/gorilla/handlers"
-)
-
-type Compress struct{}
-
-func NewCompress() *Compress {
-	return &Compress{}
-}
-
-func (middleware *Compress) Wrap(next http.Handler) http.Handler {
-	return gorillahandlers.CompressHandler(next)
-}

pkg/http/middleware/cors.go

@@ -1,25 +0,0 @@
-package middleware
-
-import (
-	"net/http"
-
-	"github.com/rs/cors"
-)
-
-type Cors struct {
-	cors *cors.Cors
-}
-
-func NewCors() *Cors {
-	return &Cors{
-		cors: cors.New(cors.Options{
-			AllowedOrigins: []string{"*"},
-			AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH", "OPTIONS"},
-			AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control"},
-		}),
-	}
-}
-
-func (middleware *Cors) Wrap(next http.Handler) http.Handler {
-	return middleware.cors.Handler(next)
-}

pkg/http/middleware/otel.go

@@ -1,43 +0,0 @@
-package middleware
-
-import (
-	"net/http"
-	"slices"
-
-	"github.com/gorilla/mux"
-	"go.opentelemetry.io/contrib/instrumentation/github.com/gorilla/mux/otelmux"
-	"go.opentelemetry.io/otel/metric"
-	"go.opentelemetry.io/otel/propagation"
-	"go.opentelemetry.io/otel/trace"
-)
-
-// defaultExcludedRoutes are the health endpoints kept out of tracing/metrics to
-// avoid drowning telemetry in probe traffic.
-var defaultExcludedRoutes = []string{
-	"/api/v1/health",
-	"/api/v2/healthz",
-	"/api/v2/readyz",
-	"/api/v2/livez",
-}
-
-type Otel struct {
-	wrap mux.MiddlewareFunc
-}
-
-func NewOtel(service string, meterProvider metric.MeterProvider, tracerProvider trace.TracerProvider) *Otel {
-	return &Otel{
-		wrap: otelmux.Middleware(
-			service,
-			otelmux.WithMeterProvider(meterProvider),
-			otelmux.WithTracerProvider(tracerProvider),
-			otelmux.WithPropagators(propagation.NewCompositeTextMapPropagator(propagation.Baggage{}, propagation.TraceContext{})),
-			otelmux.WithFilter(func(r *http.Request) bool {
-				return !slices.Contains(defaultExcludedRoutes, r.URL.Path)
-			}),
-		),
-	}
-}
-
-func (middleware *Otel) Wrap(next http.Handler) http.Handler {
-	return middleware.wrap(next)
-}

pkg/http/server/config.go

@@ -1,89 +1,9 @@
 package server
 
-import (
-	"crypto/tls"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-)
-
-var tlsVersions = map[string]uint16{
-	"1.2": tls.VersionTLS12,
-	"1.3": tls.VersionTLS13,
-}
-
+// Config holds the configuration for http.
 type Config struct {
-	// Address specifies the TCP address for the server to listen on, in the form "host:port".
+	//Address specifies the TCP address for the server to listen on, in the form "host:port".
 	// If empty, ":http" (port 80) is used. The service names are defined in RFC 6335 and assigned by IANA.
 	// See net.Dial for details of the address format.
 	Address string `mapstructure:"address"`
-
-	// ReadTimeout bounds reading an entire request, including the body. Zero means no timeout.
-	ReadTimeout time.Duration `mapstructure:"read_timeout"`
-
-	// WriteTimeout bounds writing the response. Zero means no timeout, required for
-	// streaming endpoints that hold the connection open.
-	WriteTimeout time.Duration `mapstructure:"write_timeout"`
-
-	TLS TLS `mapstructure:"tls"`
-}
-
-type TLS struct {
-	Enabled bool `mapstructure:"enabled"`
-
-	// The full path to the certificate file.
-	CertFile string `mapstructure:"cert_file"`
-
-	// The full path to the key file.
-	KeyFile string `mapstructure:"key_file"`
-
-	// MinVersion is the minimum acceptable TLS version, "1.2" or "1.3". Empty uses the Go default.
-	MinVersion string `mapstructure:"min_version"`
-}
-
-func (c Config) Validate() error {
-	if !c.TLS.Enabled {
-		return nil
-	}
-
-	if c.TLS.CertFile == "" || c.TLS.KeyFile == "" {
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "tls::cert_file and tls::key_file are required when tls is enabled")
-	}
-
-	_, err := tlsVersion(c.TLS.MinVersion)
-	if err != nil {
-		return err
-	}
-
-	return nil
-}
-
-func (tlsConfig TLS) Config() (*tls.Config, error) {
-	cert, err := tls.LoadX509KeyPair(tlsConfig.CertFile, tlsConfig.KeyFile)
-	if err != nil {
-		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "cannot load tls::cert_file and tls::key_file: %v", err)
-	}
-
-	minVersion, err := tlsVersion(tlsConfig.MinVersion)
-	if err != nil {
-		return nil, err
-	}
-
-	return &tls.Config{
-		Certificates: []tls.Certificate{cert},
-		MinVersion:   minVersion,
-	}, nil
-}
-
-func tlsVersion(name string) (uint16, error) {
-	if name == "" {
-		return 0, nil
-	}
-
-	version, ok := tlsVersions[name]
-	if !ok {
-		return 0, errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid tls version %q, must be \"1.2\" or \"1.3\"", name)
-	}
-
-	return version, nil
 }

pkg/http/server/server.go

@@ -28,30 +28,17 @@ func New(logger *slog.Logger, cfg Config, handler http.Handler) (*Server, error)
 		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "cannot build http server, logger is required")
 	}
 
-	if err := cfg.Validate(); err != nil {
-		return nil, err
-	}
-
 	srv := &http.Server{
 		Addr:           cfg.Address,
 		Handler:        handler,
-		ReadTimeout:    cfg.ReadTimeout,
-		WriteTimeout:   cfg.WriteTimeout,
+		ReadTimeout:    10 * time.Second,
+		WriteTimeout:   10 * time.Second,
 		MaxHeaderBytes: 1 << 20,
 	}
 
-	if cfg.TLS.Enabled {
-		tlsConfig, err := cfg.TLS.Config()
-		if err != nil {
-			return nil, err
-		}
-
-		srv.TLSConfig = tlsConfig
-	}
-
 	return &Server{
 		srv:     srv,
-		logger:  logger.With(slog.String("pkg", "github.com/SigNoz/signoz/pkg/http/server")),
+		logger:  logger.With(slog.String("pkg", "go.signoz.io/pkg/http/server")),
 		handler: handler,
 		cfg:     cfg,
 	}, nil
@@ -59,18 +46,11 @@ func New(logger *slog.Logger, cfg Config, handler http.Handler) (*Server, error)
 
 func (server *Server) Start(ctx context.Context) error {
 	server.logger.InfoContext(ctx, "starting http server", slog.String("address", server.srv.Addr))
-
-	var err error
-	if server.cfg.TLS.Enabled {
-		// The certificate is already loaded in TLSConfig, so ListenAndServeTLS needs no file paths.
-		err = server.srv.ListenAndServeTLS("", "")
-	} else {
-		err = server.srv.ListenAndServe()
-	}
-
-	if err != nil && err != http.ErrServerClosed {
-		server.logger.ErrorContext(ctx, "failed to start server", errors.Attr(err))
-		return err
+	if err := server.srv.ListenAndServe(); err != nil {
+		if err != http.ErrServerClosed {
+			server.logger.ErrorContext(ctx, "failed to start server", errors.Attr(err))
+			return err
+		}
 	}
 	return nil
 }

pkg/http/server/server_test.go

@@ -1,243 +0,0 @@
-package server
-
-import (
-	"context"
-	"crypto/ecdsa"
-	"crypto/elliptic"
-	"crypto/rand"
-	"crypto/tls"
-	"crypto/x509"
-	"crypto/x509/pkix"
-	"encoding/pem"
-	"io"
-	"log/slog"
-	"math/big"
-	"net"
-	"net/http"
-	"os"
-	"path/filepath"
-	"testing"
-	"time"
-
-	"github.com/stretchr/testify/assert"
-	"github.com/stretchr/testify/require"
-)
-
-func TestNew(t *testing.T) {
-	logger := slog.New(slog.DiscardHandler)
-	handler := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {})
-	certFile, keyFile := writeSelfSignedCert(t)
-
-	corruptFile := filepath.Join(t.TempDir(), "corrupt.crt")
-	require.NoError(t, os.WriteFile(corruptFile, []byte("not a pem"), 0o644))
-
-	testCases := []struct {
-		name       string
-		config     Config
-		err        bool
-		minVersion uint16
-	}{
-		{
-			name:   "TLSDisabled",
-			config: Config{},
-		},
-		{
-			name:   "TLSDisabled_WithCertAndKey",
-			config: Config{TLS: TLS{CertFile: "ignored.crt", KeyFile: "ignored.key"}},
-		},
-		{
-			name:   "TLSEnabled_WithoutCertAndKey",
-			config: Config{TLS: TLS{Enabled: true}},
-			err:    true,
-		},
-		{
-			name:   "TLSEnabled_WithoutKey",
-			config: Config{TLS: TLS{Enabled: true, CertFile: "server.crt"}},
-			err:    true,
-		},
-		{
-			name:   "TLSEnabled_WithoutCert",
-			config: Config{TLS: TLS{Enabled: true, KeyFile: "server.key"}},
-			err:    true,
-		},
-		{
-			name:   "TLSEnabled_InvalidMinVersion",
-			config: Config{TLS: TLS{Enabled: true, CertFile: "tls.crt", KeyFile: "tls.key", MinVersion: "1.1"}},
-			err:    true,
-		},
-		{
-			name:   "TLSEnabled_MissingFiles",
-			config: Config{TLS: TLS{Enabled: true, CertFile: "missing.crt", KeyFile: "missing.key"}},
-			err:    true,
-		},
-		{
-			name:   "TLSEnabled_CorruptCertFile",
-			config: Config{TLS: TLS{Enabled: true, CertFile: corruptFile, KeyFile: keyFile}},
-			err:    true,
-		},
-		{
-			name:   "TLSEnabled_DefaultVersions",
-			config: Config{TLS: TLS{Enabled: true, CertFile: certFile, KeyFile: keyFile}},
-		},
-		{
-			name:       "TLSEnabled_WithMin",
-			config:     Config{TLS: TLS{Enabled: true, CertFile: certFile, KeyFile: keyFile, MinVersion: "1.3"}},
-			minVersion: tls.VersionTLS13,
-		},
-	}
-
-	for _, testCase := range testCases {
-		t.Run(testCase.name, func(t *testing.T) {
-			server, err := New(logger, testCase.config, handler)
-			if testCase.err {
-				assert.Error(t, err)
-				return
-			}
-
-			require.NoError(t, err)
-			if !testCase.config.TLS.Enabled {
-				assert.Nil(t, server.srv.TLSConfig)
-				return
-			}
-
-			require.NotNil(t, server.srv.TLSConfig)
-			assert.Len(t, server.srv.TLSConfig.Certificates, 1)
-			assert.Equal(t, testCase.minVersion, server.srv.TLSConfig.MinVersion)
-		})
-	}
-}
-
-func TestStartWithTLS(t *testing.T) {
-	certFile, keyFile := writeSelfSignedCert(t)
-	addr := freeAddr(t)
-
-	server, err := New(
-		slog.New(slog.DiscardHandler),
-		Config{Address: addr, TLS: TLS{Enabled: true, CertFile: certFile, KeyFile: keyFile}},
-		http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { _, _ = w.Write([]byte("ok")) }),
-	)
-	require.NoError(t, err)
-
-	errC := make(chan error, 1)
-	go func() { errC <- server.Start(context.Background()) }()
-
-	certPEM, err := os.ReadFile(certFile)
-	require.NoError(t, err)
-	pool := x509.NewCertPool()
-	require.True(t, pool.AppendCertsFromPEM(certPEM))
-	client := &http.Client{Transport: &http.Transport{TLSClientConfig: &tls.Config{RootCAs: pool}}}
-
-	var (
-		statusCode int
-		body       []byte
-		tlsVersion uint16
-	)
-	require.Eventually(t, func() bool {
-		resp, err := client.Get("https://" + addr)
-		if err != nil {
-			return false
-		}
-		defer func() { _ = resp.Body.Close() }()
-
-		body, err = io.ReadAll(resp.Body)
-		if err != nil {
-			return false
-		}
-
-		statusCode = resp.StatusCode
-		if resp.TLS != nil {
-			tlsVersion = resp.TLS.Version
-		}
-		return true
-	}, 5*time.Second, 25*time.Millisecond)
-
-	assert.Equal(t, http.StatusOK, statusCode)
-	assert.Equal(t, "ok", string(body))
-	assert.GreaterOrEqual(t, tlsVersion, uint16(tls.VersionTLS12))
-
-	plainResp, err := http.Get("http://" + addr)
-	require.NoError(t, err)
-	_ = plainResp.Body.Close()
-	assert.Equal(t, http.StatusBadRequest, plainResp.StatusCode)
-
-	require.NoError(t, server.Stop(context.Background()))
-	require.NoError(t, <-errC)
-}
-
-func TestStartWithoutTLS(t *testing.T) {
-	addr := freeAddr(t)
-
-	server, err := New(
-		slog.New(slog.DiscardHandler),
-		Config{Address: addr},
-		http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { _, _ = w.Write([]byte("pong")) }),
-	)
-	require.NoError(t, err)
-
-	errC := make(chan error, 1)
-	go func() { errC <- server.Start(context.Background()) }()
-
-	var (
-		statusCode    int
-		tlsNegotiated bool
-	)
-	require.Eventually(t, func() bool {
-		resp, err := http.Get("http://" + addr)
-		if err != nil {
-			return false
-		}
-		defer func() { _ = resp.Body.Close() }()
-
-		statusCode = resp.StatusCode
-		tlsNegotiated = resp.TLS != nil
-		return true
-	}, 5*time.Second, 25*time.Millisecond)
-
-	assert.Equal(t, http.StatusOK, statusCode)
-	assert.False(t, tlsNegotiated)
-
-	require.NoError(t, server.Stop(context.Background()))
-	require.NoError(t, <-errC)
-}
-
-func freeAddr(t *testing.T) string {
-	t.Helper()
-
-	listener, err := net.Listen("tcp", "127.0.0.1:0")
-	require.NoError(t, err)
-	defer func() { _ = listener.Close() }()
-
-	return listener.Addr().String()
-}
-
-func writeSelfSignedCert(t *testing.T) (string, string) {
-	t.Helper()
-
-	key, err := ecdsa.GenerateKey(elliptic.P256(), rand.Reader)
-	require.NoError(t, err)
-
-	template := &x509.Certificate{
-		SerialNumber: big.NewInt(1),
-		Subject:      pkix.Name{CommonName: "localhost"},
-		NotBefore:    time.Now().Add(-time.Hour),
-		NotAfter:     time.Now().Add(time.Hour),
-		KeyUsage:     x509.KeyUsageDigitalSignature,
-		ExtKeyUsage:  []x509.ExtKeyUsage{x509.ExtKeyUsageServerAuth},
-		IPAddresses:  []net.IP{net.ParseIP("127.0.0.1")},
-	}
-
-	der, err := x509.CreateCertificate(rand.Reader, template, template, &key.PublicKey, key)
-	require.NoError(t, err)
-
-	keyDER, err := x509.MarshalECPrivateKey(key)
-	require.NoError(t, err)
-
-	dir := t.TempDir()
-	certFile := filepath.Join(dir, "server.crt")
-	keyFile := filepath.Join(dir, "server.key")
-
-	require.NoError(t, os.WriteFile(certFile, pem.EncodeToMemory(&pem.Block{Type: "CERTIFICATE", Bytes: der}), 0o644))
-	require.NoError(t, os.WriteFile(keyFile, pem.EncodeToMemory(&pem.Block{Type: "EC PRIVATE KEY", Bytes: keyDER}), 0o600))
-
-	return certFile, keyFile
-}

pkg/modules/rulestatehistory/implrulestatehistory/handler.go

@@ -114,6 +114,7 @@ func (h *handler) GetRuleHistoryTimeline(w http.ResponseWriter, r *http.Request)
 			Fingerprint:         item.Fingerprint,
 			Value:               item.Value,
 			RelatedTracesLink:   item.RelatedTracesLink,
+			RelatedAITracesLink: item.RelatedAITracesLink,
 			RelatedLogsLink:     item.RelatedLogsLink,
 		})
 	}
@@ -151,11 +152,12 @@ func (h *handler) GetRuleHistoryContributors(w http.ResponseWriter, r *http.Requ
 	converted := make([]rulestatehistorytypes.GettableRuleStateHistoryContributor, 0, len(res))
 	for _, item := range res {
 		converted = append(converted, rulestatehistorytypes.GettableRuleStateHistoryContributor{
-			Fingerprint:       item.Fingerprint,
-			Labels:            item.Labels.ToQBLabels(),
-			Count:             item.Count,
-			RelatedTracesLink: item.RelatedTracesLink,
-			RelatedLogsLink:   item.RelatedLogsLink,
+			Fingerprint:         item.Fingerprint,
+			Labels:              item.Labels.ToQBLabels(),
+			Count:               item.Count,
+			RelatedTracesLink:   item.RelatedTracesLink,
+			RelatedAITracesLink: item.RelatedAITracesLink,
+			RelatedLogsLink:     item.RelatedLogsLink,
 		})
 	}
 	render.Success(w, http.StatusOK, converted)

pkg/modules/rulestatehistory/implrulestatehistory/links.go

@@ -41,7 +41,8 @@ func (m *module) relatedLinkBuilderForRule(ctx context.Context, orgID valuer.UUI
 		return nil
 	}
 
-	if rule.AlertType != ruletypes.AlertTypeLogs && rule.AlertType != ruletypes.AlertTypeTraces {
+	signal, ok := relatedLinkSignal(rule.AlertType)
+	if !ok {
 		return nil
 	}
 	if rule.RuleCondition == nil || rule.RuleCondition.CompositeQuery == nil {
@@ -62,10 +63,6 @@ func (m *module) relatedLinkBuilderForRule(ctx context.Context, orgID valuer.UUI
 		builder.evaluation = ruletypes.RollingWindow{EvalWindow: evalWindow}
 	}
 
-	signal := telemetrytypes.SignalLogs
-	if rule.AlertType == ruletypes.AlertTypeTraces {
-		signal = telemetrytypes.SignalTraces
-	}
 	// links are still built from the labels alone when the rule has no builder
 	// query for the signal (e.g. ClickHouse SQL alerts)
 	builder.filterExpr, builder.groupBy, _ = contextlinks.BuilderQueryForSignal(rule.RuleCondition.CompositeQuery.Queries, signal)
@@ -84,21 +81,35 @@ func (b *relatedLinkBuilder) queryWindow(unixMilli int64) (time.Time, time.Time)
 	return start.Add(-3 * time.Minute), end
 }
 
-// links returns the encoded logs and traces explorer query params for the
-// given entry labels and time range; at most one of the two is non-empty.
-func (b *relatedLinkBuilder) links(labels rulestatehistorytypes.LabelsString, start, end time.Time) (string, string) {
+// links returns the explorer query params for the given entry labels and time
+// range.
+func (b *relatedLinkBuilder) links(labels rulestatehistorytypes.LabelsString, start, end time.Time) rulestatehistorytypes.RelatedLinks {
 	lbls := map[string]string{}
 	if err := json.Unmarshal([]byte(labels), &lbls); err != nil {
-		return "", ""
+		return rulestatehistorytypes.RelatedLinks{}
 	}
 
 	whereClause := contextlinks.PrepareFilterExpression(lbls, b.filterExpr, b.groupBy)
 
 	switch b.alertType {
 	case ruletypes.AlertTypeLogs:
-		return contextlinks.PrepareParamsForLogsV5(start, end, whereClause).Encode(), ""
+		return rulestatehistorytypes.RelatedLinks{RelatedLogsLink: contextlinks.PrepareParamsForLogsV5(start, end, whereClause).Encode()}
 	case ruletypes.AlertTypeTraces:
-		return "", contextlinks.PrepareParamsForTracesV5(start, end, whereClause).Encode()
+		return rulestatehistorytypes.RelatedLinks{RelatedTracesLink: contextlinks.PrepareParamsForTracesV5(start, end, whereClause, qbtypes.QueryTypeBuilder).Encode()}
+	case ruletypes.AlertTypeAITraces:
+		return rulestatehistorytypes.RelatedLinks{RelatedAITracesLink: contextlinks.PrepareParamsForTracesV5(start, end, whereClause, qbtypes.QueryTypeBuilderAI).Encode()}
 	}
-	return "", ""
+	return rulestatehistorytypes.RelatedLinks{}
+}
+
+// relatedLinkSignal returns the explorer signal that related links open for
+// the alert type, or ok=false when the alert type has none (e.g. metrics).
+func relatedLinkSignal(alertType ruletypes.AlertType) (telemetrytypes.Signal, bool) {
+	switch alertType {
+	case ruletypes.AlertTypeLogs:
+		return telemetrytypes.SignalLogs, true
+	case ruletypes.AlertTypeTraces, ruletypes.AlertTypeAITraces:
+		return telemetrytypes.SignalTraces, true
+	}
+	return telemetrytypes.SignalUnspecified, false
 }

pkg/modules/rulestatehistory/implrulestatehistory/module.go

@@ -34,7 +34,7 @@ func (m *module) GetHistoryTimeline(ctx context.Context, orgID valuer.UUID, rule
 	if builder := m.relatedLinkBuilderForRule(ctx, orgID, ruleID); builder != nil {
 		for idx := range items {
 			start, end := builder.queryWindow(items[idx].UnixMilli)
-			items[idx].RelatedLogsLink, items[idx].RelatedTracesLink = builder.links(items[idx].Labels, start, end)
+			items[idx].RelatedLinks = builder.links(items[idx].Labels, start, end)
 		}
 	}
 
@@ -60,7 +60,7 @@ func (m *module) GetHistoryContributors(ctx context.Context, orgID valuer.UUID,
 		// span it too instead of a single evaluation window
 		start, end := time.UnixMilli(query.Start), time.UnixMilli(query.End)
 		for idx := range contributors {
-			contributors[idx].RelatedLogsLink, contributors[idx].RelatedTracesLink = builder.links(contributors[idx].Labels, start, end)
+			contributors[idx].RelatedLinks = builder.links(contributors[idx].Labels, start, end)
 		}
 	}
 

pkg/pprof/httppprof/provider.go

@@ -6,7 +6,6 @@ import (
 	"net/http"
 	nethttppprof "net/http/pprof"
 	runtimepprof "runtime/pprof"
-	"time"
 
 	"github.com/SigNoz/signoz/pkg/factory"
 	httpserver "github.com/SigNoz/signoz/pkg/http/server"
@@ -24,7 +23,7 @@ func NewFactory() factory.ProviderFactory[pprof.PProf, pprof.Config] {
 func New(_ context.Context, settings factory.ProviderSettings, config pprof.Config) (pprof.PProf, error) {
 	server, err := httpserver.New(
 		settings.Logger.With(slog.String("pkg", "github.com/SigNoz/signoz/pkg/pprof/httppprof")),
-		httpserver.Config{Address: config.Address, ReadTimeout: 10 * time.Second, WriteTimeout: 10 * time.Second},
+		httpserver.Config{Address: config.Address},
 		newHandler(),
 	)
 	if err != nil {

pkg/query-service/app/http_handler.go

@@ -830,12 +830,12 @@ func (aH *APIHandler) getRuleStateHistory(w http.ResponseWriter, r *http.Request
 				whereClause := contextlinks.PrepareFilterExpression(lbls, filterExpr, q.GroupBy)
 
 				res.Items[idx].RelatedLogsLink = contextlinks.PrepareParamsForLogsV5(start, end, whereClause).Encode()
-			} else if rule.AlertType == ruletypes.AlertTypeTraces {
+			} else if rule.AlertType == ruletypes.AlertTypeTraces || rule.AlertType == ruletypes.AlertTypeAITraces {
 				// TODO(srikanthccv): re-visit this and support multiple queries
 				var q qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]
 
 				for _, query := range rule.RuleCondition.CompositeQuery.Queries {
-					if query.Type == qbtypes.QueryTypeBuilder {
+					if query.Type == qbtypes.QueryTypeBuilder || query.Type == qbtypes.QueryTypeBuilderAI {
 						switch spec := query.Spec.(type) {
 						case qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]:
 							q = spec
@@ -849,7 +849,7 @@ func (aH *APIHandler) getRuleStateHistory(w http.ResponseWriter, r *http.Request
 				}
 
 				whereClause := contextlinks.PrepareFilterExpression(lbls, filterExpr, q.GroupBy)
-				res.Items[idx].RelatedTracesLink = contextlinks.PrepareParamsForTracesV5(start, end, whereClause).Encode()
+				res.Items[idx].RelatedTracesLink = contextlinks.PrepareParamsForTracesV5(start, end, whereClause, rule.AlertType.BuilderQueryType()).Encode()
 			}
 		}
 	}
@@ -4070,20 +4070,20 @@ func (aH *APIHandler) RegisterTraceFunnelsRoutes(router *mux.Router, am *middlew
 		Methods(http.MethodPut)
 
 	// Analytics endpoints
-	traceFunnelsRouter.HandleFunc("/{funnel_id}/analytics/validate", am.ViewAccess(aH.handleValidateTraces)).Methods("POST")
-	traceFunnelsRouter.HandleFunc("/{funnel_id}/analytics/overview", am.ViewAccess(aH.handleFunnelAnalytics)).Methods("POST")
-	traceFunnelsRouter.HandleFunc("/{funnel_id}/analytics/steps", am.ViewAccess(aH.handleStepAnalytics)).Methods("POST")
-	traceFunnelsRouter.HandleFunc("/{funnel_id}/analytics/steps/overview", am.ViewAccess(aH.handleFunnelStepAnalytics)).Methods("POST")
-	traceFunnelsRouter.HandleFunc("/{funnel_id}/analytics/slow-traces", am.ViewAccess(aH.handleFunnelSlowTraces)).Methods("POST")
-	traceFunnelsRouter.HandleFunc("/{funnel_id}/analytics/error-traces", am.ViewAccess(aH.handleFunnelErrorTraces)).Methods("POST")
+	traceFunnelsRouter.HandleFunc("/{funnel_id}/analytics/validate", aH.handleValidateTraces).Methods("POST")
+	traceFunnelsRouter.HandleFunc("/{funnel_id}/analytics/overview", aH.handleFunnelAnalytics).Methods("POST")
+	traceFunnelsRouter.HandleFunc("/{funnel_id}/analytics/steps", aH.handleStepAnalytics).Methods("POST")
+	traceFunnelsRouter.HandleFunc("/{funnel_id}/analytics/steps/overview", aH.handleFunnelStepAnalytics).Methods("POST")
+	traceFunnelsRouter.HandleFunc("/{funnel_id}/analytics/slow-traces", aH.handleFunnelSlowTraces).Methods("POST")
+	traceFunnelsRouter.HandleFunc("/{funnel_id}/analytics/error-traces", aH.handleFunnelErrorTraces).Methods("POST")
 
 	// Analytics endpoints
-	traceFunnelsRouter.HandleFunc("/analytics/validate", am.ViewAccess(aH.handleValidateTracesWithPayload)).Methods("POST")
-	traceFunnelsRouter.HandleFunc("/analytics/overview", am.ViewAccess(aH.handleFunnelAnalyticsWithPayload)).Methods("POST")
-	traceFunnelsRouter.HandleFunc("/analytics/steps", am.ViewAccess(aH.handleStepAnalyticsWithPayload)).Methods("POST")
-	traceFunnelsRouter.HandleFunc("/analytics/steps/overview", am.ViewAccess(aH.handleFunnelStepAnalyticsWithPayload)).Methods("POST")
-	traceFunnelsRouter.HandleFunc("/analytics/slow-traces", am.ViewAccess(aH.handleFunnelSlowTracesWithPayload)).Methods("POST")
-	traceFunnelsRouter.HandleFunc("/analytics/error-traces", am.ViewAccess(aH.handleFunnelErrorTracesWithPayload)).Methods("POST")
+	traceFunnelsRouter.HandleFunc("/analytics/validate", aH.handleValidateTracesWithPayload).Methods("POST")
+	traceFunnelsRouter.HandleFunc("/analytics/overview", aH.handleFunnelAnalyticsWithPayload).Methods("POST")
+	traceFunnelsRouter.HandleFunc("/analytics/steps", aH.handleStepAnalyticsWithPayload).Methods("POST")
+	traceFunnelsRouter.HandleFunc("/analytics/steps/overview", aH.handleFunnelStepAnalyticsWithPayload).Methods("POST")
+	traceFunnelsRouter.HandleFunc("/analytics/slow-traces", aH.handleFunnelSlowTracesWithPayload).Methods("POST")
+	traceFunnelsRouter.HandleFunc("/analytics/error-traces", aH.handleFunnelErrorTracesWithPayload).Methods("POST")
 }
 
 func (aH *APIHandler) handleValidateTraces(w http.ResponseWriter, r *http.Request) {

pkg/query-service/app/server.go

@@ -2,9 +2,19 @@ package app
 
 import (
 	"context"
+	"fmt"
+	"net"
+	"net/http"
+	"slices"
 
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 
+	"github.com/gorilla/handlers"
+
+	"github.com/rs/cors"
+	"github.com/soheilhy/cmux"
+
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
 	"github.com/SigNoz/signoz/pkg/query-service/app/clickhouseReader"
@@ -13,15 +23,31 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/app/opamp"
 	opAmpModel "github.com/SigNoz/signoz/pkg/query-service/app/opamp/model"
 	"github.com/SigNoz/signoz/pkg/signoz"
+	"github.com/SigNoz/signoz/pkg/web"
 
 	"log/slog"
 
+	"go.opentelemetry.io/contrib/instrumentation/github.com/gorilla/mux/otelmux"
+	"go.opentelemetry.io/otel/propagation"
+
 	"github.com/SigNoz/signoz/pkg/query-service/constants"
+	"github.com/SigNoz/signoz/pkg/query-service/healthcheck"
+	"github.com/SigNoz/signoz/pkg/query-service/utils"
 )
 
-// Server runs auxiliary servers (opamp) alongside the signoz apiserver
+// Server runs HTTP, Mux and a grpc server
 type Server struct {
+	config signoz.Config
+	signoz *signoz.SigNoz
+
+	// public http router
+	httpConn     net.Listener
+	httpServer   *http.Server
+	httpHostPort string
+
 	opampServer *opamp.Server
+
+	unavailableChannel chan healthcheck.Status
 }
 
 // NewServer creates and initializes Server
@@ -64,20 +90,20 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		return nil, err
 	}
 
-	// Register the legacy query-service routes on the apiserver router. The
-	// apiserver owns the HTTP server and applies the middleware chain at serve
-	// time, so these routes get the same treatment as the apiserver routes.
-	r := signoz.APIServer.Router()
-	am := middleware.NewAuthZ(signoz.Instrumentation.Logger(), signoz.Modules.OrgGetter, signoz.Authz)
+	s := &Server{
+		config:             config,
+		signoz:             signoz,
+		httpHostPort:       constants.HTTPHostPort,
+		unavailableChannel: make(chan healthcheck.Status),
+	}
 
-	apiHandler.RegisterRoutes(r, am)
-	apiHandler.RegisterLogsRoutes(r, am)
-	apiHandler.RegisterIntegrationRoutes(r, am)
-	apiHandler.RegisterQueryRangeV3Routes(r, am)
-	apiHandler.RegisterQueryRangeV4Routes(r, am)
-	apiHandler.RegisterMessagingQueuesRoutes(r, am)
-	apiHandler.RegisterThirdPartyApiRoutes(r, am)
-	apiHandler.RegisterTraceFunnelsRoutes(r, am)
+	httpServer, err := s.createPublicServer(apiHandler, signoz.Web)
+
+	if err != nil {
+		return nil, err
+	}
+
+	s.httpServer = httpServer
 
 	opAmpModel.Init(signoz.SQLStore, signoz.Instrumentation.Logger(), signoz.Modules.OrgGetter)
 
@@ -95,8 +121,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		return nil, err
 	}
 
-	s := &Server{}
-
 	s.opampServer = opamp.InitializeServer(
 		&opAmpModel.AllAgents,
 		agentConfMgr,
@@ -106,18 +130,146 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	return s, nil
 }
 
-// Start starts the opamp websocket server. The HTTP API server is started by
-// the signoz registry.
-func (s *Server) Start(ctx context.Context) error {
-	slog.Info("Starting OpAmp Websocket server", "addr", constants.OpAmpWsEndpoint)
-	if err := s.opampServer.Start(constants.OpAmpWsEndpoint); err != nil {
+// HealthCheckStatus returns health check status channel a client can subscribe to
+func (s Server) HealthCheckStatus() chan healthcheck.Status {
+	return s.unavailableChannel
+}
+
+func (s *Server) createPublicServer(api *APIHandler, web web.Web) (*http.Server, error) {
+	r := NewRouter()
+
+	r.Use(middleware.NewRecovery(s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(otelmux.Middleware(
+		"apiserver",
+		otelmux.WithMeterProvider(s.signoz.Instrumentation.MeterProvider()),
+		otelmux.WithTracerProvider(s.signoz.Instrumentation.TracerProvider()),
+		otelmux.WithPropagators(propagation.NewCompositeTextMapPropagator(propagation.Baggage{}, propagation.TraceContext{})),
+		otelmux.WithFilter(func(r *http.Request) bool {
+			return !slices.Contains([]string{"/api/v1/health"}, r.URL.Path)
+		}),
+	))
+	r.Use(middleware.NewIdentN(s.signoz.IdentNResolver, s.signoz.Sharder, s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(middleware.NewTimeout(s.signoz.Instrumentation.Logger(),
+		s.config.APIServer.Timeout.ExcludedRoutes,
+		s.config.APIServer.Timeout.Default,
+		s.config.APIServer.Timeout.Max,
+	).Wrap)
+	r.Use(middleware.NewResource(s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(middleware.NewAudit(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes, s.signoz.Auditor).Wrap)
+	r.Use(middleware.NewComment().Wrap)
+
+	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger(), s.signoz.Modules.OrgGetter, s.signoz.Authz)
+
+	api.RegisterRoutes(r, am)
+	api.RegisterLogsRoutes(r, am)
+	api.RegisterIntegrationRoutes(r, am)
+	api.RegisterQueryRangeV3Routes(r, am)
+	api.RegisterQueryRangeV4Routes(r, am)
+	api.RegisterMessagingQueuesRoutes(r, am)
+	api.RegisterThirdPartyApiRoutes(r, am)
+	api.RegisterTraceFunnelsRoutes(r, am)
+
+	err := s.signoz.APIServer.AddToRouter(r)
+	if err != nil {
+		return nil, err
+	}
+
+	c := cors.New(cors.Options{
+		AllowedOrigins: []string{"*"},
+		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH", "OPTIONS"},
+		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control"},
+	})
+
+	handler := c.Handler(r)
+
+	handler = handlers.CompressHandler(handler)
+
+	err = web.AddToRouter(r)
+	if err != nil {
+		return nil, err
+	}
+
+	routePrefix := s.config.Global.ExternalPath()
+	if routePrefix != "" {
+		prefixed := http.StripPrefix(routePrefix, handler)
+		handler = http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
+			switch req.URL.Path {
+			case "/api/v1/health", "/api/v2/healthz", "/api/v2/readyz", "/api/v2/livez":
+				r.ServeHTTP(w, req)
+				return
+			}
+
+			prefixed.ServeHTTP(w, req)
+		})
+	}
+
+	return &http.Server{
+		Handler: handler,
+	}, nil
+}
+
+// initListeners initialises listeners of the server
+func (s *Server) initListeners() error {
+	// listen on public port
+	var err error
+	publicHostPort := s.httpHostPort
+	if publicHostPort == "" {
+		return fmt.Errorf("constants.HTTPHostPort is required")
+	}
+
+	s.httpConn, err = net.Listen("tcp", publicHostPort)
+	if err != nil {
 		return err
 	}
 
+	slog.Info(fmt.Sprintf("Query server started listening on %s...", s.httpHostPort))
+
+	return nil
+}
+
+// Start listening on http and private http port concurrently
+func (s *Server) Start(ctx context.Context) error {
+	err := s.initListeners()
+	if err != nil {
+		return err
+	}
+
+	var httpPort int
+	if port, err := utils.GetPort(s.httpConn.Addr()); err == nil {
+		httpPort = port
+	}
+
+	go func() {
+		slog.Info("Starting HTTP server", "port", httpPort, "addr", s.httpHostPort)
+
+		switch err := s.httpServer.Serve(s.httpConn); err {
+		case nil, http.ErrServerClosed, cmux.ErrListenerClosed:
+			// normal exit, nothing to do
+		default:
+			slog.Error("Could not start HTTP server", errors.Attr(err))
+		}
+		s.unavailableChannel <- healthcheck.Unavailable
+	}()
+
+	go func() {
+		slog.Info("Starting OpAmp Websocket server", "addr", constants.OpAmpWsEndpoint)
+		err := s.opampServer.Start(constants.OpAmpWsEndpoint)
+		if err != nil {
+			slog.Error("opamp ws server failed to start", errors.Attr(err))
+			s.unavailableChannel <- healthcheck.Unavailable
+		}
+	}()
+
 	return nil
 }
 
 func (s *Server) Stop(ctx context.Context) error {
+	if s.httpServer != nil {
+		if err := s.httpServer.Shutdown(context.Background()); err != nil {
+			return err
+		}
+	}
+
 	s.opampServer.Stop()
 
 	return nil

pkg/query-service/constants/constants.go

@@ -10,7 +10,11 @@ import (
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
-const OpAmpWsEndpoint = "0.0.0.0:4320" // address for opamp websocket
+const (
+	HTTPHostPort    = "0.0.0.0:8080" // Address to serve http (query service)
+	PrivateHostPort = "0.0.0.0:8085" // Address to server internal services like alert manager
+	OpAmpWsEndpoint = "0.0.0.0:4320" // address for opamp websocket
+)
 
 const MaxAllowedPointsInTimeSeries = 300
 

pkg/query-service/healthcheck/handler.go

@@ -0,0 +1,12 @@
+package healthcheck
+
+const (
+	// Unavailable indicates the service is not able to handle requests
+	Unavailable Status = iota
+	// Ready indicates the service is ready to handle requests
+	Ready
+	// Broken indicates that the healthcheck itself is broken, not serving HTTP
+	Broken
+)
+
+type Status int

pkg/query-service/rules/base_rule.go

@@ -420,7 +420,7 @@ func (r *BaseRule) ShouldSkipNewGroups() bool {
 func (r *BaseRule) isFilterNewSeriesSupported() bool {
 	if r.ruleCondition.CompositeQuery.QueryType == ruletypes.QueryTypeBuilder {
 		for _, query := range r.ruleCondition.CompositeQuery.Queries {
-			if query.Type != qbtypes.QueryTypeBuilder {
+			if query.Type != qbtypes.QueryTypeBuilder && query.Type != qbtypes.QueryTypeBuilderAI {
 				continue
 			}
 			switch query.Spec.(type) {

pkg/query-service/rules/base_rule_test.go

@@ -7,6 +7,7 @@ import (
 	"testing"
 	"time"
 
+	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 
 	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
@@ -164,6 +165,24 @@ type filterNewSeriesTestCase struct {
 	expectError       bool
 }
 
+func TestBaseRule_IsFilterNewSeriesSupported(t *testing.T) {
+	postableRule := createPostableRule(&ruletypes.AlertCompositeQuery{
+		QueryType: ruletypes.QueryTypeBuilder,
+		Queries: []qbtypes.QueryEnvelope{{
+			Type: qbtypes.QueryTypeBuilderAI,
+			Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
+				Name:         "A",
+				Signal:       telemetrytypes.SignalTraces,
+				Aggregations: []qbtypes.TraceAggregation{{Expression: "max(trace.total_tokens)"}},
+			},
+		}},
+	})
+
+	rule, err := NewBaseRule("test-rule", valuer.GenerateUUID(), &postableRule, mustParseURL(t, "http://localhost:8080"), WithLogger(instrumentationtest.New().Logger()))
+	require.NoError(t, err)
+	assert.False(t, rule.isFilterNewSeriesSupported())
+}
+
 func TestBaseRule_FilterNewSeries(t *testing.T) {
 	defaultEvalTime := time.Unix(1700000000, 0)
 	defaultNewGroupEvalDelay := valuer.MustParseTextDuration("2m")

pkg/query-service/rules/setups_test.go

@@ -9,6 +9,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/statementbuilder"
+	"github.com/SigNoz/signoz/pkg/statementbuilder/aistatementbuilder"
 	"github.com/SigNoz/signoz/pkg/statementbuilder/logsstatementbuilder"
 	"github.com/SigNoz/signoz/pkg/statementbuilder/metricsstatementbuilder"
 	"github.com/SigNoz/signoz/pkg/statementbuilder/tracesstatementbuilder"
@@ -127,3 +128,40 @@ func prepareQuerierForTraces(t *testing.T, telemetryStore telemetrystore.Telemet
 		0, // maxConcurrentQueries (0 means default)
 	)
 }
+
+func prepareQuerierForAITraces(t *testing.T, telemetryStore telemetrystore.TelemetryStore, keysMap map[string][]*telemetrytypes.TelemetryFieldKey) querier.Querier {
+	t.Helper()
+
+	providerSettings := instrumentationtest.New().ToProviderSettings()
+	metadataStore := telemetrytypestest.NewMockMetadataStore()
+
+	for _, keys := range keysMap {
+		for _, key := range keys {
+			key.Signal = telemetrytypes.SignalTraces
+		}
+	}
+	metadataStore.KeysMap = keysMap
+
+	fl := flaggertest.New(t)
+	aiTraceStmtBuilder, err := aistatementbuilder.NewFactory(telemetryStore, metadataStore, fl).New(context.Background(), providerSettings, statementbuilder.Config{})
+	require.NoError(t, err)
+
+	return querier.New(
+		providerSettings,
+		telemetryStore,
+		metadataStore,
+		nil, // prometheus
+		nil, // promV2
+		nil, // traceStmtBuilder
+		aiTraceStmtBuilder,
+		nil, // logStmtBuilder
+		nil, // auditStmtBuilder
+		nil, // metricStmtBuilder
+		nil, // meterStmtBuilder
+		nil, // traceOperatorStmtBuilder
+		nil, // bucketCache
+		fl,
+		0,
+		0, // maxConcurrentQueries (0 means default)
+	)
+}

pkg/query-service/rules/threshold_rule.go

@@ -132,7 +132,7 @@ func (r *ThresholdRule) prepareParamsForTraces(ctx context.Context, ts time.Time
 
 	whereClause := contextlinks.PrepareFilterExpression(lbls.Map(), filterExpr, groupBy)
 
-	return contextlinks.PrepareParamsForTracesV5(start, end, whereClause)
+	return contextlinks.PrepareParamsForTracesV5(start, end, whereClause, r.typ.BuilderQueryType())
 }
 
 func (r *ThresholdRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, ts time.Time) (ruletypes.Vector, error) {
@@ -308,10 +308,14 @@ func (r *ThresholdRule) Eval(ctx context.Context, ts time.Time) (int, error) {
 		// is used alert grouping, and we want to group alerts with the same
 		// label set, but different timestamps, together.
 		switch r.typ {
-		case ruletypes.AlertTypeTraces:
+		case ruletypes.AlertTypeTraces, ruletypes.AlertTypeAITraces:
 			params := r.prepareParamsForTraces(ctx, ts, smpl.Metric)
 			if len(params) > 0 {
-				link := r.ExternalURL("traces-explorer", params)
+				explorerPath := "traces-explorer"
+				if r.typ == ruletypes.AlertTypeAITraces {
+					explorerPath = "ai-observability/explorer"
+				}
+				link := r.ExternalURL(explorerPath, params)
 				r.logger.InfoContext(ctx, "adding traces link to annotations", slog.String("annotation.link", link))
 				annotations = append(annotations, ruletypes.Label{Name: ruletypes.AnnotationRelatedTraces, Value: link})
 			}

pkg/query-service/rules/threshold_rule_test.go

@@ -916,6 +916,104 @@ func TestThresholdRuleTracesLink(t *testing.T) {
 	}
 }
 
+func TestThresholdRuleAITracesLink(t *testing.T) {
+	postableRule := ruletypes.PostableRule{
+		AlertName: "AI traces link test",
+		AlertType: ruletypes.AlertTypeAITraces,
+		RuleType:  ruletypes.RuleTypeThreshold,
+		Evaluation: &ruletypes.EvaluationEnvelope{Kind: ruletypes.RollingEvaluation, Spec: ruletypes.RollingWindow{
+			EvalWindow: valuer.MustParseTextDuration("5m"),
+			Frequency:  valuer.MustParseTextDuration("1m"),
+		}},
+		RuleCondition: &ruletypes.RuleCondition{
+			CompositeQuery: &ruletypes.AlertCompositeQuery{
+				QueryType: ruletypes.QueryTypeBuilder,
+				Queries: []qbtypes.QueryEnvelope{{
+					Type: qbtypes.QueryTypeBuilderAI,
+					Spec: qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]{
+						Name:         "A",
+						StepInterval: qbtypes.Step{Duration: time.Minute},
+						Aggregations: []qbtypes.TraceAggregation{{
+							Expression: "count()",
+						}},
+						Signal: telemetrytypes.SignalTraces,
+						Filter: &qbtypes.Filter{
+							Expression: "service.name = 'llm-gateway'",
+						},
+					},
+				}},
+			},
+		},
+	}
+
+	cols := make([]cmock.ColumnType, 0)
+	cols = append(cols, cmock.ColumnType{Name: "value", Type: "Float64"})
+	cols = append(cols, cmock.ColumnType{Name: "attr", Type: "String"})
+	cols = append(cols, cmock.ColumnType{Name: "timestamp", Type: "DateTime"})
+
+	keysMap := map[string][]*telemetrytypes.TelemetryFieldKey{
+		"service.name": {
+			{
+				Name:          "service.name",
+				FieldContext:  telemetrytypes.FieldContextResource,
+				FieldDataType: telemetrytypes.FieldDataTypeString,
+			},
+		},
+	}
+
+	logger := instrumentationtest.New().Logger()
+
+	for idx, c := range testCases {
+
+		telemetryStore := telemetrystoretest.New(telemetrystore.Config{}, &queryMatcherAny{})
+
+		rows := cmock.NewRows(cols, c.values)
+		telemetryStore.Mock().
+			ExpectQuery("SELECT any").
+			WithArgs(nil, nil, nil, nil, nil, nil, nil, nil, nil, nil).
+			WillReturnRows(rows)
+
+		querier := prepareQuerierForAITraces(t, telemetryStore, keysMap)
+
+		postableRule.RuleCondition.CompareOperator = c.compareOperator
+		postableRule.RuleCondition.MatchType = c.matchType
+		postableRule.RuleCondition.Target = &c.target
+		postableRule.RuleCondition.CompositeQuery.Unit = c.yAxisUnit
+		postableRule.RuleCondition.TargetUnit = c.targetUnit
+		postableRule.RuleCondition.Thresholds = &ruletypes.RuleThresholdData{
+			Kind: ruletypes.BasicThresholdKind,
+			Spec: ruletypes.BasicRuleThresholds{
+				{
+					Name:            postableRule.AlertName,
+					TargetValue:     &c.target,
+					TargetUnit:      c.targetUnit,
+					MatchType:       c.matchType,
+					CompareOperator: c.compareOperator,
+				},
+			},
+		}
+		postableRule.Annotations = map[string]string{
+			"description": "This alert is fired when the defined metric (current value: {{$value}}) crosses the threshold ({{$threshold}})",
+			"summary":     "The rule threshold is set to {{$threshold}}, and the observed metric value is {{$value}}",
+		}
+
+		externalURL := mustParseURL(t, "http://localhost:8080")
+		rule, err := NewThresholdRule("69", valuer.GenerateUUID(), &postableRule, querier, logger, externalURL)
+		require.NoError(t, err, "case %d", idx)
+
+		alertsFound, err := rule.Eval(context.Background(), time.Now())
+		require.NoError(t, err, "case %d", idx)
+
+		assert.Equal(t, c.expectAlerts, alertsFound, "case %d", idx)
+		for _, item := range rule.Active {
+			link := item.Annotations.Map()[ruletypes.AnnotationRelatedTraces]
+			assert.True(t, strings.HasPrefix(link, "http://localhost:8080/ai-observability/explorer?"), "case %d: %s", idx, link)
+			assert.Contains(t, link, "builder_ai_query", "case %d", idx)
+			assert.Contains(t, link, "llm-gateway", "case %d", idx)
+		}
+	}
+}
+
 func TestThresholdRuleLogsLink(t *testing.T) {
 	postableRule := ruletypes.PostableRule{
 		AlertName: "Logs link test",

pkg/signoz/openapi.go

@@ -10,14 +10,12 @@ import (
 	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/apiserver"
 	"github.com/SigNoz/signoz/pkg/apiserver/signozapiserver"
-	"github.com/SigNoz/signoz/pkg/auditor"
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/gateway"
 	"github.com/SigNoz/signoz/pkg/global"
 	"github.com/SigNoz/signoz/pkg/http/handler"
-	"github.com/SigNoz/signoz/pkg/identn"
 	"github.com/SigNoz/signoz/pkg/instrumentation"
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/modules/aiobservability"
@@ -44,11 +42,9 @@ import (
 	"github.com/SigNoz/signoz/pkg/prometheus"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/ruler"
-	"github.com/SigNoz/signoz/pkg/sharder"
 	"github.com/SigNoz/signoz/pkg/statsreporter"
 	"github.com/SigNoz/signoz/pkg/subscription"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/SigNoz/signoz/pkg/web"
 	"github.com/SigNoz/signoz/pkg/zeus"
 	"github.com/swaggest/jsonschema-go"
 	"github.com/swaggest/openapi-go"
@@ -105,11 +101,6 @@ func NewOpenAPI(ctx context.Context, instrumentation instrumentation.Instrumenta
 		struct{ ruler.Handler }{},
 		struct{ statsreporter.Handler }{},
 		struct{ savedview.Handler }{},
-		global.Config{},
-		struct{ identn.IdentNResolver }{},
-		struct{ sharder.Sharder }{},
-		struct{ auditor.Auditor }{},
-		struct{ web.Web }{},
 		struct{ quickfilter.Module }{},
 		struct{ quickfilter.Handler }{},
 	).New(ctx, instrumentation.ToProviderSettings(), apiserver.Config{})

pkg/signoz/provider.go

@@ -319,7 +319,7 @@ func NewQuerierProviderFactories(telemetryStore telemetrystore.TelemetryStore, p
 	)
 }
 
-func NewAPIServerProviderFactories(orgGetter organization.Getter, authz authz.AuthZ, modules Modules, handlers Handlers, globalConfig global.Config, gatewayService gateway.Gateway, identNResolver identn.IdentNResolver, sharder sharder.Sharder, auditor auditor.Auditor, web web.Web) factory.NamedMap[factory.ProviderFactory[apiserver.APIServer, apiserver.Config]] {
+func NewAPIServerProviderFactories(orgGetter organization.Getter, authz authz.AuthZ, modules Modules, handlers Handlers, globalConfig global.Config, gatewayService gateway.Gateway) factory.NamedMap[factory.ProviderFactory[apiserver.APIServer, apiserver.Config]] {
 	return factory.MustNewNamedMap(
 		signozapiserver.NewFactory(
 			orgGetter,
@@ -361,11 +361,6 @@ func NewAPIServerProviderFactories(orgGetter organization.Getter, authz authz.Au
 			handlers.RulerHandler,
 			handlers.StatsHandler,
 			handlers.SavedView,
-			globalConfig,
-			identNResolver,
-			sharder,
-			auditor,
-			web,
 			modules.QuickFilter,
 			handlers.QuickFilter,
 		),

pkg/signoz/provider_test.go

@@ -102,10 +102,6 @@ func TestNewProviderFactories(t *testing.T) {
 			Handlers{},
 			global.Config{},
 			nil,
-			nil,
-			nil,
-			nil,
-			nil,
 		)
 	})
 }

pkg/signoz/signoz.go

@@ -635,20 +635,13 @@ func New(
 		ctx,
 		providerSettings,
 		config.APIServer,
-		NewAPIServerProviderFactories(orgGetter, authz, modules, handlers, config.Global, gateway, identNResolver, sharder, auditor, web),
+		NewAPIServerProviderFactories(orgGetter, authz, modules, handlers, config.Global, gateway),
 		"signoz",
 	)
 	if err != nil {
 		return nil, err
 	}
 
-	// Register the API server with the registry so its lifecycle is managed
-	// alongside the other services and it shows up in the health endpoint.
-	err = registry.Add(ctx, factory.NewNamedService(factory.MustNewName("apiserver"), apiserverInstance))
-	if err != nil {
-		return nil, err
-	}
-
 	return &SigNoz{
 		Registry:               registry,
 		Analytics:              analytics,

pkg/types/rulestatehistorytypes/response.go

@@ -23,15 +23,17 @@ type GettableRuleStateHistory struct {
 	Fingerprint         uint64               `json:"fingerprint" required:"true"`
 	Value               float64              `json:"value" required:"true"`
 	RelatedTracesLink   string               `json:"relatedTracesLink,omitempty"`
+	RelatedAITracesLink string               `json:"relatedAITracesLink,omitempty"`
 	RelatedLogsLink     string               `json:"relatedLogsLink,omitempty"`
 }
 
 type GettableRuleStateHistoryContributor struct {
-	Fingerprint       uint64           `json:"fingerprint" required:"true"`
-	Labels            []*qbtypes.Label `json:"labels" required:"true"`
-	Count             uint64           `json:"count" required:"true"`
-	RelatedTracesLink string           `json:"relatedTracesLink,omitempty"`
-	RelatedLogsLink   string           `json:"relatedLogsLink,omitempty"`
+	Fingerprint         uint64           `json:"fingerprint" required:"true"`
+	Labels              []*qbtypes.Label `json:"labels" required:"true"`
+	Count               uint64           `json:"count" required:"true"`
+	RelatedTracesLink   string           `json:"relatedTracesLink,omitempty"`
+	RelatedAITracesLink string           `json:"relatedAITracesLink,omitempty"`
+	RelatedLogsLink     string           `json:"relatedLogsLink,omitempty"`
 }
 
 type GettableRuleStateWindow struct {

pkg/types/rulestatehistorytypes/store.go

@@ -77,16 +77,23 @@ type RuleStateHistory struct {
 	Fingerprint  uint64               `ch:"fingerprint"`
 	Value        float64              `ch:"value"`
 
-	RelatedTracesLink string
-	RelatedLogsLink   string
+	RelatedLinks
 }
 
 type RuleStateHistoryContributor struct {
-	Fingerprint       uint64       `ch:"fingerprint"`
-	Labels            LabelsString `ch:"labels"`
-	Count             uint64       `ch:"count"`
-	RelatedTracesLink string
-	RelatedLogsLink   string
+	Fingerprint uint64       `ch:"fingerprint"`
+	Labels      LabelsString `ch:"labels"`
+	Count       uint64       `ch:"count"`
+
+	RelatedLinks
+}
+
+// RelatedLinks holds the encoded explorer query params for a history entry;
+// at most one field is non-empty.
+type RelatedLinks struct {
+	RelatedTracesLink   string
+	RelatedAITracesLink string
+	RelatedLogsLink     string
 }
 
 type Store interface {

pkg/types/ruletypes/api_params.go

@@ -24,6 +24,7 @@ const (
 	AlertTypeTraces     AlertType = "TRACES_BASED_ALERT"
 	AlertTypeLogs       AlertType = "LOGS_BASED_ALERT"
 	AlertTypeExceptions AlertType = "EXCEPTIONS_BASED_ALERT"
+	AlertTypeAITraces   AlertType = "AI_TRACES_BASED_ALERT"
 )
 
 // Enum implements jsonschema.Enum; returns the acceptable values for AlertType.
@@ -33,9 +34,19 @@ func (AlertType) Enum() []any {
 		AlertTypeTraces,
 		AlertTypeLogs,
 		AlertTypeExceptions,
+		AlertTypeAITraces,
 	}
 }
 
+// BuilderQueryType returns the query type the alert type's builder queries
+// carry; only AI trace alerts use builder_ai_query.
+func (t AlertType) BuilderQueryType() qbtypes.QueryType {
+	if t == AlertTypeAITraces {
+		return qbtypes.QueryTypeBuilderAI
+	}
+	return qbtypes.QueryTypeBuilder
+}
+
 const (
 	DefaultSchemaVersion  = "v1"
 	SchemaVersionV2Alpha1 = "v2alpha1"
@@ -406,11 +417,11 @@ func (r *PostableRule) Validate() error {
 
 	if r.AlertType != "" {
 		switch r.AlertType {
-		case AlertTypeMetric, AlertTypeTraces, AlertTypeLogs, AlertTypeExceptions:
+		case AlertTypeMetric, AlertTypeTraces, AlertTypeLogs, AlertTypeExceptions, AlertTypeAITraces:
 		default:
 			errs = append(errs, errors.NewInvalidInputf(errors.CodeInvalidInput,
-				"alertType: unsupported value %q; must be one of %q, %q, %q, %q",
-				r.AlertType, AlertTypeMetric, AlertTypeTraces, AlertTypeLogs, AlertTypeExceptions))
+				"alertType: unsupported value %q; must be one of %q, %q, %q, %q, %q",
+				r.AlertType, AlertTypeMetric, AlertTypeTraces, AlertTypeLogs, AlertTypeExceptions, AlertTypeAITraces))
 		}
 	}
 

pkg/types/ruletypes/validate_test.go

@@ -209,6 +209,10 @@ func TestValidate_PostableRule_Common(t *testing.T) {
 			name: "valid alertType EXCEPTIONS_BASED_ALERT",
 			json: patchJSON(validV1Builder(), `{"alertType": "EXCEPTIONS_BASED_ALERT"}`),
 		},
+		{
+			name: "valid alertType AI_TRACES_BASED_ALERT",
+			json: patchJSON(validV1Builder(), `{"alertType": "AI_TRACES_BASED_ALERT"}`),
+		},
 		{
 			name: "empty alertType is ok (optional)",
 			json: removeField(validV1Builder(), "alertType"),

tests/integration/testdata/alerts/test_scenarios/rule_state_history_ai_traces/alert_data.jsonl

@@ -0,0 +1,16 @@
+{"timestamp": "2026-01-29T10:00:00.000000Z", "duration": "PT2.5S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f601", "span_id": "c1b2c3d4e5f6a701", "parent_span_id": "", "name": "POST /chat", "kind": 2, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"http.request.method": "POST", "http.response.status_code": "200", "http.request.path": "/chat"}}
+{"timestamp": "2026-01-29T10:00:00.200000Z", "duration": "PT2S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f601", "span_id": "d1b2c3d4e5f6a701", "parent_span_id": "c1b2c3d4e5f6a701", "name": "chat gpt-4o-mini", "kind": 3, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"gen_ai.system": "openai", "gen_ai.request.model": "gpt-4o-mini", "gen_ai.user.id": "user-0", "gen_ai.usage.input_tokens": 300, "gen_ai.usage.output_tokens": 120, "_signoz.gen_ai.total_cost": 0.02}}
+{"timestamp": "2026-01-29T10:00:30.000000Z", "duration": "PT2.5S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f602", "span_id": "c1b2c3d4e5f6a702", "parent_span_id": "", "name": "POST /chat", "kind": 2, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"http.request.method": "POST", "http.response.status_code": "200", "http.request.path": "/chat"}}
+{"timestamp": "2026-01-29T10:00:30.200000Z", "duration": "PT2S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f602", "span_id": "d1b2c3d4e5f6a702", "parent_span_id": "c1b2c3d4e5f6a702", "name": "chat gpt-4o-mini", "kind": 3, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"gen_ai.system": "openai", "gen_ai.request.model": "gpt-4o-mini", "gen_ai.user.id": "user-1", "gen_ai.usage.input_tokens": 310, "gen_ai.usage.output_tokens": 125, "_signoz.gen_ai.total_cost": 0.02}}
+{"timestamp": "2026-01-29T10:01:00.000000Z", "duration": "PT2.5S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f603", "span_id": "c1b2c3d4e5f6a703", "parent_span_id": "", "name": "POST /chat", "kind": 2, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"http.request.method": "POST", "http.response.status_code": "200", "http.request.path": "/chat"}}
+{"timestamp": "2026-01-29T10:01:00.200000Z", "duration": "PT2S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f603", "span_id": "d1b2c3d4e5f6a703", "parent_span_id": "c1b2c3d4e5f6a703", "name": "chat gpt-4o-mini", "kind": 3, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"gen_ai.system": "openai", "gen_ai.request.model": "gpt-4o-mini", "gen_ai.user.id": "user-0", "gen_ai.usage.input_tokens": 320, "gen_ai.usage.output_tokens": 130, "_signoz.gen_ai.total_cost": 0.02}}
+{"timestamp": "2026-01-29T10:01:30.000000Z", "duration": "PT2.5S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f604", "span_id": "c1b2c3d4e5f6a704", "parent_span_id": "", "name": "POST /chat", "kind": 2, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"http.request.method": "POST", "http.response.status_code": "200", "http.request.path": "/chat"}}
+{"timestamp": "2026-01-29T10:01:30.200000Z", "duration": "PT2S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f604", "span_id": "d1b2c3d4e5f6a704", "parent_span_id": "c1b2c3d4e5f6a704", "name": "chat gpt-4o-mini", "kind": 3, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"gen_ai.system": "openai", "gen_ai.request.model": "gpt-4o-mini", "gen_ai.user.id": "user-1", "gen_ai.usage.input_tokens": 330, "gen_ai.usage.output_tokens": 135, "_signoz.gen_ai.total_cost": 0.02}}
+{"timestamp": "2026-01-29T10:02:00.000000Z", "duration": "PT2.5S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f605", "span_id": "c1b2c3d4e5f6a705", "parent_span_id": "", "name": "POST /chat", "kind": 2, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"http.request.method": "POST", "http.response.status_code": "200", "http.request.path": "/chat"}}
+{"timestamp": "2026-01-29T10:02:00.200000Z", "duration": "PT2S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f605", "span_id": "d1b2c3d4e5f6a705", "parent_span_id": "c1b2c3d4e5f6a705", "name": "chat gpt-4o-mini", "kind": 3, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"gen_ai.system": "openai", "gen_ai.request.model": "gpt-4o-mini", "gen_ai.user.id": "user-0", "gen_ai.usage.input_tokens": 340, "gen_ai.usage.output_tokens": 140, "_signoz.gen_ai.total_cost": 0.02}}
+{"timestamp": "2026-01-29T10:02:30.000000Z", "duration": "PT2.5S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f606", "span_id": "c1b2c3d4e5f6a706", "parent_span_id": "", "name": "POST /chat", "kind": 2, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"http.request.method": "POST", "http.response.status_code": "200", "http.request.path": "/chat"}}
+{"timestamp": "2026-01-29T10:02:30.200000Z", "duration": "PT2S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f606", "span_id": "d1b2c3d4e5f6a706", "parent_span_id": "c1b2c3d4e5f6a706", "name": "chat gpt-4o-mini", "kind": 3, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"gen_ai.system": "openai", "gen_ai.request.model": "gpt-4o-mini", "gen_ai.user.id": "user-1", "gen_ai.usage.input_tokens": 350, "gen_ai.usage.output_tokens": 145, "_signoz.gen_ai.total_cost": 0.02}}
+{"timestamp": "2026-01-29T10:03:00.000000Z", "duration": "PT2.5S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f607", "span_id": "c1b2c3d4e5f6a707", "parent_span_id": "", "name": "POST /chat", "kind": 2, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"http.request.method": "POST", "http.response.status_code": "200", "http.request.path": "/chat"}}
+{"timestamp": "2026-01-29T10:03:00.200000Z", "duration": "PT2S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f607", "span_id": "d1b2c3d4e5f6a707", "parent_span_id": "c1b2c3d4e5f6a707", "name": "chat gpt-4o-mini", "kind": 3, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"gen_ai.system": "openai", "gen_ai.request.model": "gpt-4o-mini", "gen_ai.user.id": "user-0", "gen_ai.usage.input_tokens": 360, "gen_ai.usage.output_tokens": 150, "_signoz.gen_ai.total_cost": 0.02}}
+{"timestamp": "2026-01-29T10:03:30.000000Z", "duration": "PT2.5S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f608", "span_id": "c1b2c3d4e5f6a708", "parent_span_id": "", "name": "POST /chat", "kind": 2, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"http.request.method": "POST", "http.response.status_code": "200", "http.request.path": "/chat"}}
+{"timestamp": "2026-01-29T10:03:30.200000Z", "duration": "PT2S", "trace_id": "7a1f6d3d6b0a1f9e8a71b2c3d4e5f608", "span_id": "d1b2c3d4e5f6a708", "parent_span_id": "c1b2c3d4e5f6a708", "name": "chat gpt-4o-mini", "kind": 3, "status_code": 1, "status_message": "", "resources": {"deployment.environment": "production", "service.name": "llm-gateway", "os.type": "linux", "host.name": "linux-000"}, "attributes": {"gen_ai.system": "openai", "gen_ai.request.model": "gpt-4o-mini", "gen_ai.user.id": "user-1", "gen_ai.usage.input_tokens": 370, "gen_ai.usage.output_tokens": 155, "_signoz.gen_ai.total_cost": 0.02}}

tests/integration/testdata/alerts/test_scenarios/rule_state_history_ai_traces/rule.json

@@ -0,0 +1,73 @@
+{
+  "alert": "rule_state_history_ai_traces",
+  "ruleType": "threshold_rule",
+  "alertType": "AI_TRACES_BASED_ALERT",
+  "condition": {
+    "thresholds": {
+      "kind": "basic",
+      "spec": [
+        {
+          "name": "critical",
+          "target": 0,
+          "matchType": "at_least_once",
+          "op": "above",
+          "channels": [
+            "test channel"
+          ]
+        }
+      ]
+    },
+    "compositeQuery": {
+      "queryType": "builder",
+      "panelType": "graph",
+      "queries": [
+        {
+          "type": "builder_ai_query",
+          "spec": {
+            "name": "A",
+            "signal": "traces",
+            "filter": {
+              "expression": "trace.input_tokens > 100"
+            },
+            "groupBy": [
+              {
+                "name": "service.name",
+                "fieldContext": "resource",
+                "fieldDataType": "string"
+              }
+            ],
+            "aggregations": [
+              {
+                "expression": "max(trace.total_tokens)"
+              }
+            ]
+          }
+        }
+      ]
+    },
+    "selectedQueryName": "A"
+  },
+  "evaluation": {
+    "kind": "rolling",
+    "spec": {
+      "evalWindow": "5m0s",
+      "frequency": "15s"
+    }
+  },
+  "labels": {},
+  "annotations": {
+    "description": "This alert is fired when the defined metric (current value: {{$value}}) crosses the threshold ({{$threshold}})",
+    "summary": "This alert is fired when the defined metric (current value: {{$value}}) crosses the threshold ({{$threshold}})"
+  },
+  "notificationSettings": {
+    "groupBy": [],
+    "usePolicy": false,
+    "renotify": {
+      "enabled": false,
+      "interval": "30m",
+      "alertStates": []
+    }
+  },
+  "version": "v5",
+  "schemaVersion": "v2alpha1"
+}

tests/integration/tests/alerts/03_rule_state_history.py

@@ -38,6 +38,7 @@ def test_logs_rule_history_related_links(
 
     assert labels_to_map(item["labels"]).get("service.name") == "payment-service"
     assert item.get("relatedTracesLink", "") == ""
+    assert item.get("relatedAITracesLink", "") == ""
     assert item.get("relatedLogsLink", "") != ""
 
     # logs explorer links carry the time range in milliseconds, anchored to the
@@ -52,6 +53,7 @@ def test_logs_rule_history_related_links(
     assert len(contributors) == 1
     assert contributors[0]["count"] >= 1
     assert contributors[0].get("relatedTracesLink", "") == ""
+    assert contributors[0].get("relatedAITracesLink", "") == ""
     assert contributors[0].get("relatedLogsLink", "") != ""
 
     # contributor counts aggregate the whole queried range, so their links span it
@@ -80,6 +82,7 @@ def test_traces_rule_history_related_links(
 
     assert labels_to_map(item["labels"]).get("service.name") == "order-service"
     assert item.get("relatedLogsLink", "") == ""
+    assert item.get("relatedAITracesLink", "") == ""
     assert item.get("relatedTracesLink", "") != ""
 
     # traces explorer links carry the time range in nanoseconds, anchored to the
@@ -94,6 +97,7 @@ def test_traces_rule_history_related_links(
     assert len(contributors) == 1
     assert contributors[0]["count"] >= 1
     assert contributors[0].get("relatedLogsLink", "") == ""
+    assert contributors[0].get("relatedAITracesLink", "") == ""
     assert contributors[0].get("relatedTracesLink", "") != ""
 
     # contributor counts aggregate the whole queried range, so their links span it
@@ -101,3 +105,49 @@ def test_traces_rule_history_related_links(
     assert contributor_link["start"] == query_start_ms * 1_000_000
     assert contributor_link["end"] == query_end_ms * 1_000_000
     assert_related_link_query(contributor_link, "traces", ["http.request.path", "/order", "service.name", "order-service"])
+
+
+def test_ai_traces_rule_history_related_links(
+    signoz: types.SigNoz,
+    create_alert_rule_with_channel: Callable[[str], str],
+    insert_alert_data: Callable[[list[types.AlertData], datetime], None],
+    get_token: Callable[[str, str], str],
+):
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+    query_start_ms = int((datetime.now(tz=UTC) - timedelta(minutes=30)).timestamp() * 1000)
+
+    insert_alert_data(
+        [types.AlertData(type="traces", data_path="alerts/test_scenarios/rule_state_history_ai_traces/alert_data.jsonl")],
+        base_time=datetime.now(tz=UTC) - timedelta(minutes=5),
+    )
+    rule_id = create_alert_rule_with_channel("alerts/test_scenarios/rule_state_history_ai_traces/rule.json")
+
+    (item, query_end_ms) = wait_for_firing_timeline_entry(signoz, token, rule_id, query_start_ms)
+
+    assert labels_to_map(item["labels"]).get("service.name") == "llm-gateway"
+    assert item.get("relatedLogsLink", "") == ""
+    assert item.get("relatedTracesLink", "") == ""
+    assert item.get("relatedAITracesLink", "") != ""
+
+    # AI alert links follow the traces explorer shape: a nanosecond range
+    # anchored to the second-truncated entry timestamp
+    link = parse_related_link(item["relatedAITracesLink"])
+    assert link["end"] == (item["unixMilli"] // 1000) * 1_000_000_000
+    assert link["end"] - link["start"] == RELATED_LINK_WINDOW_SECONDS * 1_000_000_000
+    assert_related_link_query(link, "traces", ["trace.input_tokens", "100", "service.name", "llm-gateway"])
+    # the AI explorer only resolves trace.* fields for builder_ai_query
+    assert link["composite_query"]["builder"]["queryData"][0]["builderQueryType"] == "builder_ai_query"
+
+    contributors = get_rule_history_top_contributors(signoz, token, rule_id, query_start_ms, query_end_ms)
+    contributors = [c for c in contributors if labels_to_map(c["labels"]).get("service.name") == "llm-gateway"]
+    assert len(contributors) == 1
+    assert contributors[0]["count"] >= 1
+    assert contributors[0].get("relatedLogsLink", "") == ""
+    assert contributors[0].get("relatedTracesLink", "") == ""
+    assert contributors[0].get("relatedAITracesLink", "") != ""
+
+    contributor_link = parse_related_link(contributors[0]["relatedAITracesLink"])
+    assert contributor_link["start"] == query_start_ms * 1_000_000
+    assert contributor_link["end"] == query_end_ms * 1_000_000
+    assert_related_link_query(contributor_link, "traces", ["trace.input_tokens", "100", "service.name", "llm-gateway"])
+    assert contributor_link["composite_query"]["builder"]["queryData"][0]["builderQueryType"] == "builder_ai_query"