chore: minor label change

The isolate tooltip names the series too, so it needs the same wrap as
the label's.

.claude/opencode.json

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

.claude/rules/comments.md

@@ -7,5 +7,6 @@ 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

@@ -0,0 +1,16 @@
+---
+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

@@ -0,0 +1,12 @@
+---
+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,6 +2,10 @@
 
 - **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 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.
+- **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.
 - **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.

.gitignore

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

Makefile

@@ -81,10 +81,13 @@ 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.db \
+	SIGNOZ_SQLSTORE_SQLITE_PATH=$(SIGNOZ_SQLSTORE_SQLITE_PATH) \
 	SIGNOZ_WEB_ENABLED=false \
 	SIGNOZ_TOKENIZER_JWT_SECRET=secret \
 	SIGNOZ_ALERTMANAGER_PROVIDER=signoz \
@@ -101,7 +104,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.db \
+	SIGNOZ_SQLSTORE_SQLITE_PATH=$(SIGNOZ_SQLSTORE_SQLITE_PATH) \
 	SIGNOZ_WEB_ENABLED=false \
 	SIGNOZ_TOKENIZER_JWT_SECRET=secret \
 	SIGNOZ_ALERTMANAGER_PROVIDER=signoz \
@@ -111,6 +114,28 @@ 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)
@@ -241,3 +266,8 @@ 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 -

conf/example.yaml

@@ -138,6 +138,18 @@ 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/contributing/development.md

@@ -83,7 +83,13 @@ This command:
 
    You should see: `{"status":"ok"}`
 
-> 💡 **Tip**: The API server runs at `http://localhost:8080/` by default
+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.
 
 ### 4. Setting up the Frontend
 
@@ -119,6 +125,36 @@ 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, "go.signoz.io/pkg/modules/user"),
+            settings: factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/modules/user"),
             // ... dependencies ...
             stopC:    make(chan struct{}),
         }

ee/query-service/app/server.go

@@ -3,56 +3,29 @@ 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 HTTP, Mux and a grpc server
+// Server runs auxiliary servers (opamp) alongside the signoz apiserver
 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
@@ -127,57 +100,11 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		return nil, err
 	}
 
-	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)
+	// 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)
 
 	apiHandler.RegisterRoutes(r, am)
 	apiHandler.RegisterLogsRoutes(r, am)
@@ -188,107 +115,29 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterThirdPartyApiRoutes(r, am)
 	apiHandler.RegisterTraceFunnelsRoutes(r, am)
 
-	err := s.signoz.APIServer.AddToRouter(r)
-	if err != nil {
-		return nil, err
+	s := &Server{
+		usageManager: usageManager,
 	}
 
-	c := cors.New(cors.Options{
-		AllowedOrigins: []string{"*"},
-		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH", "OPTIONS"},
-		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control"},
-	})
+	s.opampServer = opamp.InitializeServer(
+		&opAmpModel.AllAgents, agentConfMgr, signoz.Instrumentation,
+	)
 
-	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
+	return s, 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
+// Start starts the opamp websocket server. The HTTP API server is started by
+// the signoz registry.
 func (s *Server) Start(ctx context.Context) error {
-	err := s.initListeners()
-	if err != nil {
+	slog.Info("Starting OpAmp Websocket server", "addr", baseconst.OpAmpWsEndpoint)
+	if err := s.opampServer.Start(baseconst.OpAmpWsEndpoint); 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/constants/queryBuilder.ts

@@ -614,18 +614,6 @@ 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/lib/uPlotV2/components/Legend/Legend.module.scss

@@ -0,0 +1,250 @@
+@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

@@ -1,204 +0,0 @@
-@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,139 +1,144 @@
 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.styles.scss';
+import { LEGEND_ITEM_EXTRA_WIDTH, MAX_LEGEND_WIDTH } from './constants';
+import LegendRow from './LegendRow';
+import LegendToolbar from './LegendToolbar';
+import { filterLegendItems, getShownSeriesState } from './utils';
 
-export const MAX_LEGEND_WIDTH = 240;
+import styles from './Legend.module.scss';
 
 /**
- * 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.
+ * Presentational legend, source-agnostic: the uPlot charts feed it via
+ * UPlotLegend, Pie feeds it directly. Every state change is delegated.
  */
 export default function Legend({
 	items,
 	position,
 	averageLegendWidth = MAX_LEGEND_WIDTH,
 	focusedSeriesIndex,
-	onClick,
-	onMouseMove,
-	onMouseLeave,
+	onToggleSeries,
+	onShowOnlySeries,
+	onShowSeries,
+	onHoverSeries,
 	showCopy = true,
 }: LegendProps): JSX.Element {
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
-	const [legendSearchQuery, setLegendSearchQuery] = useState('');
+	const [filterQuery, setFilterQuery] = useState('');
 
-	// Search is intrinsic to the right-positioned legend.
-	const searchEnabled = position === LegendPosition.RIGHT;
-	const { width: containerWidth } = useResizeObserver(legendContainerRef);
+	const itemWidth = averageLegendWidth + LEGEND_ITEM_EXTRA_WIDTH;
+	const isRightPosition = position === LegendPosition.RIGHT;
 
-	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]);
-
-	const visibleLegendItems = useMemo(() => {
-		if (!searchEnabled || !legendSearchQuery.trim()) {
-			return items;
-		}
-
-		const query = legendSearchQuery.trim().toLowerCase();
-		return items.filter((item) => item.label?.toLowerCase().includes(query));
-	}, [searchEnabled, legendSearchQuery, items]);
-
-	const renderLegendItem = useCallback(
-		(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 { visibleCount, soleShownSeriesIndex } = useMemo(
+		() => getShownSeriesState(items),
+		[items],
 	);
 
-	const isEmptyState = useMemo(() => {
-		if (!searchEnabled || !legendSearchQuery.trim()) {
-			return false;
-		}
-		return visibleLegendItems.length === 0;
-	}, [searchEnabled, legendSearchQuery, visibleLegendItems]);
+	// 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 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 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,
+		],
+	);
 
 	return (
 		<div
 			ref={legendContainerRef}
-			className="legend-container"
-			onClick={onClick}
-			onMouseMove={onMouseMove}
-			onMouseLeave={onMouseLeave}
-			style={{
-				['--legend-average-width' as string]: `${averageLegendWidth + 16}px`, // 16px is the marker width
-			}}
+			className={cx(styles.container, {
+				[styles.isRight]: isRightPosition,
+			})}
+			style={{ ['--legend-item-width' as string]: `${itemWidth}px` }}
+			onMouseLeave={handleMouseLeave}
+			data-testid="legend-container"
 		>
-			{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>
+			{showToolbar && (
+				<LegendToolbar
+					visibleCount={visibleCount}
+					totalCount={items.length}
+					showFilter={showFilter}
+					filterQuery={filterQuery}
+					onFilterQueryChange={setFilterQuery}
+				/>
 			)}
 			{isEmptyState ? (
-				<div className="legend-empty-state">
-					No series found matching &quot;{legendSearchQuery}&quot;
+				<div className={styles.emptyState}>
+					No series found matching &quot;{effectiveQuery}&quot;
 				</div>
 			) : (
 				<VirtuosoGrid
-					className={cx(
-						'legend-virtuoso-container',
-						`legend-virtuoso-container-${position.toLowerCase()}`,
-						{ 'legend-virtuoso-container-single-row': isSingleRow },
-					)}
+					className={styles.scroller}
+					listClassName={styles.gridList}
+					itemClassName={styles.gridItem}
 					data={visibleLegendItems}
 					itemContent={(_, item): JSX.Element => renderLegendItem(item)}
 				/>

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

@@ -0,0 +1,209 @@
+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

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

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

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,20 @@
+/** 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

@@ -0,0 +1,34 @@
+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,10 +12,11 @@
 	}
 }
 
+// Matches the legend row's marker.
 .uplotTooltipItemMarker {
-	border-radius: 50%;
+	border-radius: var(--radius);
 	border-style: solid;
-	border-width: 2px;
+	border-width: 1.5px;
 	width: 12px;
 	height: 12px;
 	box-sizing: border-box;
@@ -30,11 +31,23 @@
 	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 }}
+				style={{ borderColor: item.color, backgroundColor: 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>{item.tooltipValue}</span>
+				<span className={Styles.uplotTooltipItemValue}>{item.tooltipValue}</span>
 			</div>
 		</div>
 	);

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

@@ -61,16 +61,16 @@ describe('UPlotLegend', () => {
 		},
 	};
 
-	let onLegendClick: jest.Mock;
-	let onLegendMouseMove: jest.Mock;
-	let onLegendMouseLeave: jest.Mock;
-	let onFocusSeries: jest.Mock;
+	let onToggleSeries: jest.Mock;
+	let onShowOnlySeries: jest.Mock;
+	let onShowSeries: jest.Mock;
+	let onHoverSeries: jest.Mock;
 
 	beforeEach(() => {
-		onLegendClick = jest.fn();
-		onLegendMouseMove = jest.fn();
-		onLegendMouseLeave = jest.fn();
-		onFocusSeries = jest.fn();
+		onToggleSeries = jest.fn();
+		onShowOnlySeries = jest.fn();
+		onShowSeries = jest.fn();
+		onHoverSeries = jest.fn();
 
 		mockUseLegendsSync.mockReturnValue({
 			legendItemsMap: baseLegendItemsMap,
@@ -79,10 +79,10 @@ describe('UPlotLegend', () => {
 		});
 
 		mockUseLegendActions.mockReturnValue({
-			onLegendClick,
-			onLegendMouseMove,
-			onLegendMouseLeave,
-			onFocusSeries,
+			onToggleSeries,
+			onShowOnlySeries,
+			onShowSeries,
+			onHoverSeries,
 		});
 	});
 
@@ -102,28 +102,39 @@ describe('UPlotLegend', () => {
 		);
 
 	describe('layout and position', () => {
-		it('renders search input when legend position is RIGHT', () => {
+		it('renders the search input on a RIGHT legend', () => {
 			renderLegend(LegendPosition.RIGHT);
 
 			expect(screen.getByTestId('legend-search-input')).toBeInTheDocument();
 		});
 
-		it('does not render search input when legend position is BOTTOM (default)', () => {
+		it('keeps a BOTTOM legend bare — its two rows all go to series', () => {
 			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 correct border color', () => {
+		it('renders the marker with the series colour, filled only when shown', () => {
 			renderLegend(LegendPosition.RIGHT);
 
-			const legendMarker = document.querySelector(
-				'[data-legend-item-id="0"] [data-is-legend-marker="true"]',
-			) as HTMLElement;
-
-			expect(legendMarker).toHaveStyle({
+			expect(
+				document.querySelector(
+					'[data-legend-item-id="0"] [data-is-legend-marker="true"]',
+				),
+			).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', () => {
@@ -136,25 +147,33 @@ describe('UPlotLegend', () => {
 		});
 	});
 
-	describe('search behavior (RIGHT position)', () => {
-		it('filters legend items based on search query (case-insensitive)', async () => {
+	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 () => {
 			const user = userEvent.setup();
 			renderLegend(LegendPosition.RIGHT);
 
-			const searchInput = screen.getByTestId('legend-search-input');
-			await user.type(searchInput, 'A');
+			await user.type(screen.getByTestId('legend-search-input'), 'a');
 
 			expect(screen.getByText('A')).toBeInTheDocument();
 			expect(screen.queryByText('B')).not.toBeInTheDocument();
 			expect(screen.queryByText('C')).not.toBeInTheDocument();
 		});
 
-		it('shows empty state when no legend items match the search query', async () => {
+		it('shows the empty state when nothing matches', async () => {
 			const user = userEvent.setup();
 			renderLegend(LegendPosition.RIGHT);
 
-			const searchInput = screen.getByTestId('legend-search-input');
-			await user.type(searchInput, 'network');
+			await user.type(screen.getByTestId('legend-search-input'), 'network');
 
 			expect(
 				screen.getByText(/No series found matching "network"/i),
@@ -162,12 +181,11 @@ describe('UPlotLegend', () => {
 			expect(screen.queryByTestId('virtuoso-grid')).not.toBeInTheDocument();
 		});
 
-		it('does not filter or show empty state when search query is empty or only whitespace', async () => {
+		it('ignores a whitespace-only query', async () => {
 			const user = userEvent.setup();
 			renderLegend(LegendPosition.RIGHT);
 
-			const searchInput = screen.getByTestId('legend-search-input');
-			await user.type(searchInput, '   ');
+			await user.type(screen.getByTestId('legend-search-input'), '   ');
 
 			expect(
 				screen.queryByText(/No series found matching/i),
@@ -178,39 +196,231 @@ describe('UPlotLegend', () => {
 		});
 	});
 
-	describe('legend actions', () => {
-		it('calls onLegendClick when a legend item is clicked', async () => {
+	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 () => {
 			const user = userEvent.setup();
 			renderLegend(LegendPosition.RIGHT);
 
 			await user.click(screen.getByText('A'));
 
-			expect(onLegendClick).toHaveBeenCalledTimes(1);
+			expect(onToggleSeries).toHaveBeenCalledWith(0);
+			expect(onShowOnlySeries).not.toHaveBeenCalled();
 		});
 
-		it('calls mouseMove when the mouse moves over a legend item', async () => {
+		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 () => {
 			const user = userEvent.setup();
 			renderLegend(LegendPosition.RIGHT);
 
-			const legendItem = document.querySelector(
-				'[data-legend-item-id="0"]',
-			) as HTMLElement;
+			const row = screen.getByTestId('legend-item-0');
+			row.focus();
+			await user.keyboard('{Enter}');
+			await user.keyboard(' ');
 
-			await user.hover(legendItem);
-
-			expect(onLegendMouseMove).toHaveBeenCalledTimes(1);
+			expect(onToggleSeries).toHaveBeenCalledTimes(2);
+			expect(onToggleSeries).toHaveBeenCalledWith(0);
 		});
 
-		it('calls onLegendMouseLeave when the mouse leaves the legend container', async () => {
+		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 () => {
 			const user = userEvent.setup();
 			renderLegend(LegendPosition.RIGHT);
 
-			const container = document.querySelector('.legend-container') as HTMLElement;
+			await user.click(screen.getByTestId('legend-only-0'));
 
-			await user.hover(container);
-			await user.unhover(container);
+			expect(onShowOnlySeries).toHaveBeenCalledWith(0);
+			expect(onToggleSeries).not.toHaveBeenCalled();
+		});
 
-			expect(onLegendMouseLeave).toHaveBeenCalledTimes(1);
+		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();
 		});
 	});
 });

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

@@ -1,4 +1,4 @@
-import { MouseEventHandler, ReactNode } from 'react';
+import { 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). The search
- * box is intrinsic to the RIGHT position (derived from `position`, not a flag).
+ * both uPlot charts (via UPlotLegend) and non-uPlot charts (Pie).
  */
 export interface LegendProps {
 	items: LegendItem[];
 	/** Legend placement; always supplied by the container. */
 	position: LegendPosition;
 	averageLegendWidth?: number;
-	/** Series index to highlight (hovered/focused). */
+	/** Series index highlighted by the chart cursor. */
 	focusedSeriesIndex: number | null;
-	/**
-	 * 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;
+	/** 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;
 	/** Show the per-item copy button. Default true. */
 	showCopy?: boolean;
 }

frontend/src/lib/uPlotV2/constants.ts

@@ -6,6 +6,11 @@ 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,6 +8,10 @@ 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';
@@ -20,12 +24,26 @@ 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 => {
@@ -33,6 +51,9 @@ 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(
 		({
@@ -43,6 +64,8 @@ export const PlotContextProvider = ({
 			uPlotInstanceRef.current = uPlotInstance;
 			idRef.current = id;
 			activeSeriesIndex.current = undefined;
+			baseSeriesWidthsRef.current = new Map();
+			highlightedSeriesIndexRef.current = null;
 			shouldSavePreferencesRef.current = !!shouldSaveSelectionPreference;
 		},
 		[],
@@ -64,6 +87,54 @@ 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;
@@ -103,10 +174,78 @@ 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],
 	);
@@ -131,14 +270,20 @@ 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,6 +26,7 @@ const createMockPlot = (series: MockSeries[] = []): uPlot =>
 		series,
 		batch: jest.fn((fn: () => void) => fn()),
 		setSeries: jest.fn(),
+		redraw: jest.fn(),
 	}) as unknown as uPlot;
 
 interface TestComponentProps {
@@ -44,7 +45,10 @@ const TestComponent = ({
 		syncSeriesVisibilityToLocalStorage,
 		onToggleSeriesVisibility,
 		onToggleSeriesOnOff,
+		onShowOnlySeries,
+		onShowSeries,
 		onFocusSeries,
+		onHighlightSeries,
 	} = usePlotContext();
 	const handleInit = (): void => {
 		if (!plot || !id || typeof shouldSaveSelectionPreference !== 'boolean') {
@@ -98,6 +102,34 @@ 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>
 	);
 };
@@ -273,6 +305,7 @@ describe('PlotContext', () => {
 			const series: MockSeries[] = [
 				{ label: 'x-axis', show: true },
 				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: true },
 			];
 			const plot = createMockPlot(series);
 
@@ -324,6 +357,7 @@ describe('PlotContext', () => {
 			const series: MockSeries[] = [
 				{ label: 'x-axis', show: true },
 				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: true },
 			];
 			const plot = createMockPlot(series);
 
@@ -343,6 +377,48 @@ 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', () => {
@@ -381,4 +457,193 @@ 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,10 +11,12 @@ const mockUsePlotContext = usePlotContext as jest.MockedFunction<
 describe('useLegendActions', () => {
 	let onToggleSeriesVisibility: jest.Mock;
 	let onToggleSeriesOnOff: jest.Mock;
-	let onFocusSeriesPlot: jest.Mock;
+	let onShowOnlySeries: jest.Mock;
+	let onShowSeries: jest.Mock;
+	let onFocusSeries: jest.Mock;
+	let onHighlightSeries: jest.Mock;
 	let setPlotContextInitialState: jest.Mock;
 	let syncSeriesVisibilityToLocalStorage: jest.Mock;
-	let setFocusedSeriesIndexMock: jest.Mock;
 	let cancelAnimationFrameSpy: jest.SpyInstance<void, [handle: number]>;
 
 	beforeAll(() => {
@@ -37,15 +39,20 @@ describe('useLegendActions', () => {
 	beforeEach(() => {
 		onToggleSeriesVisibility = jest.fn();
 		onToggleSeriesOnOff = jest.fn();
-		onFocusSeriesPlot = jest.fn();
+		onShowOnlySeries = jest.fn();
+		onShowSeries = jest.fn();
+		onFocusSeries = jest.fn();
+		onHighlightSeries = jest.fn();
 		setPlotContextInitialState = jest.fn();
 		syncSeriesVisibilityToLocalStorage = jest.fn();
-		setFocusedSeriesIndexMock = jest.fn();
 
 		mockUsePlotContext.mockReturnValue({
 			onToggleSeriesVisibility,
 			onToggleSeriesOnOff,
-			onFocusSeries: onFocusSeriesPlot,
+			onShowOnlySeries,
+			onShowSeries,
+			onFocusSeries,
+			onHighlightSeries,
 			setPlotContextInitialState,
 			syncSeriesVisibilityToLocalStorage,
 		});
@@ -53,149 +60,65 @@ describe('useLegendActions', () => {
 		cancelAnimationFrameSpy.mockClear();
 	});
 
-	const createMouseEvent = (options: {
-		legendItemId?: number;
-		isMarker?: boolean;
-	}): any => {
-		const { legendItemId, isMarker = false } = options;
+	describe('visibility actions', () => {
+		it('toggles a single series on row click', () => {
+			const { result } = renderHook(() => useLegendActions());
 
-		return {
-			target: {
-				dataset: {
-					...(isMarker ? { isLegendMarker: 'true' } : {}),
-				},
-				closest: jest.fn(() =>
-					legendItemId !== undefined
-						? { dataset: { legendItemId: String(legendItemId) } }
-						: null,
-				),
-			},
-		};
-	};
+			result.current.onToggleSeries(2);
 
-	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(onToggleSeriesOnOff).toHaveBeenCalledWith(2);
+			// The row must never isolate — that is what "Only" is for.
 			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
 		});
 
-		it('does nothing when click target is not inside a legend item', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
+		it('forwards the Only and Add actions to the plot', () => {
+			const { result } = renderHook(() => useLegendActions());
 
-			result.current.onLegendClick(createMouseEvent({}));
+			result.current.onShowOnlySeries(1);
+			result.current.onShowSeries(3);
 
-			expect(onToggleSeriesOnOff).not.toHaveBeenCalled();
-			expect(onToggleSeriesVisibility).not.toHaveBeenCalled();
+			expect(onShowOnlySeries).toHaveBeenCalledWith(1);
+			expect(onShowSeries).toHaveBeenCalledWith(3);
 		});
 	});
 
-	describe('onFocusSeries', () => {
-		it('schedules focus update and calls plot focus handler via mouse move', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
+	describe('hover highlight', () => {
+		it('highlights the hovered series', () => {
+			const { result } = renderHook(() => useLegendActions());
 
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
+			result.current.onHoverSeries(2);
 
-			expect(setFocusedSeriesIndexMock).toHaveBeenCalledWith(0);
-			expect(onFocusSeriesPlot).toHaveBeenCalledWith(0);
+			expect(onHighlightSeries).toHaveBeenCalledWith(2);
 		});
 
-		it('cancels previous animation frame before scheduling new one on subsequent mouse moves', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: null,
-				}),
-			);
+		it('clears the highlight on leave', () => {
+			const { result } = renderHook(() => useLegendActions());
 
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 0 }));
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
+			result.current.onHoverSeries(null);
 
+			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();
 		});
-	});
 
-	describe('onLegendMouseMove', () => {
-		it('focuses new series when hovering over different legend item', async () => {
-			const { result } = renderHook(() =>
-				useLegendActions({
-					setFocusedSeriesIndex: setFocusedSeriesIndexMock,
-					focusedSeriesIndex: 0,
-				}),
-			);
+		it('cancels a pending highlight frame on unmount', () => {
+			jest
+				.spyOn(global, 'requestAnimationFrame')
+				.mockImplementation((): number => 7);
 
-			result.current.onLegendMouseMove(createMouseEvent({ legendItemId: 1 }));
+			const { result, unmount } = renderHook(() => useLegendActions());
+			result.current.onHoverSeries(1);
+			unmount();
 
-			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);
+			expect(cancelAnimationFrameSpy).toHaveBeenCalledWith(7);
 		});
 	});
 });

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

@@ -1,117 +1,54 @@
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useRef,
-} from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 
-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;
-} {
+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 {
 	const {
-		onFocusSeries: onFocusSeriesPlot,
 		onToggleSeriesOnOff,
-		onToggleSeriesVisibility,
+		onShowOnlySeries,
+		onShowSeries,
+		onHighlightSeries,
 	} = usePlotContext();
 
-	const rafId = useRef<number | null>(null); // requestAnimationFrame id
+	const rafIdRef = useRef<number | null>(null);
 
-	const getLegendItemIdFromEvent = useCallback(
-		(e: React.MouseEvent<HTMLDivElement>): string | undefined => {
-			const target = e.target as HTMLElement | null;
-			if (!target) {
-				return undefined;
-			}
+	const cancelPendingHighlight = useCallback((): void => {
+		if (rafIdRef.current != null) {
+			cancelAnimationFrame(rafIdRef.current);
+			rafIdRef.current = null;
+		}
+	}, []);
 
-			const legendItemElement = target.closest<HTMLElement>(
-				'[data-legend-item-id]',
-			);
-
-			return legendItemElement?.dataset.legendItemId;
-		},
-		[],
-	);
-
-	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(
+	const onHoverSeries = useCallback(
 		(seriesIndex: number | null): void => {
-			if (rafId.current != null) {
-				cancelAnimationFrame(rafId.current);
-			}
-			rafId.current = requestAnimationFrame(() => {
-				setFocusedSeriesIndex(seriesIndex);
-				onFocusSeriesPlot(seriesIndex);
+			cancelPendingHighlight();
+			rafIdRef.current = requestAnimationFrame(() => {
+				rafIdRef.current = null;
+				onHighlightSeries(seriesIndex);
 			});
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[onFocusSeriesPlot],
+		[cancelPendingHighlight, onHighlightSeries],
 	);
 
-	const onLegendMouseMove = (e: React.MouseEvent<HTMLDivElement>): void => {
-		const legendItemId = getLegendItemIdFromEvent(e);
-		const seriesIndex = legendItemId ? Number(legendItemId) : null;
-		if (seriesIndex === focusedSeriesIndex) {
-			return;
-		}
-		onFocusSeries(seriesIndex);
-	};
+	useEffect(() => cancelPendingHighlight, [cancelPendingHighlight]);
 
-	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 {
-		onLegendClick,
-		onFocusSeries,
-		onLegendMouseMove,
-		onLegendMouseLeave,
+		onToggleSeries: onToggleSeriesOnOff,
+		onShowOnlySeries,
+		onShowSeries,
+		onHoverSeries,
 	};
 }

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

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

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

@@ -100,17 +100,29 @@ describe('Pie', () => {
 		expect(screen.getByTestId('pie')).toHaveStyle({ flexDirection: 'column' });
 	});
 
-	it('hides a slice when its legend marker is clicked', () => {
+	it('isolates a slice when its legend row is clicked with everything showing', () => {
 		renderPie();
 		const svg = screen.getByTestId('pie').querySelector('svg') as SVGElement;
 		expect(svg.querySelectorAll('path')).toHaveLength(3);
 
-		const marker = document.querySelector(
-			'[data-legend-item-id="1"] [data-is-legend-marker="true"]',
-		) as HTMLElement;
-		fireEvent.click(marker);
+		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'));
 
 		// One slice hidden → one fewer arc drawn.
-		expect(svg.querySelectorAll('path')).toHaveLength(2);
+		expect(svg.querySelectorAll('path')).toHaveLength(1);
 	});
 });

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

@@ -1,6 +1,9 @@
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 
-import { calculateChartDimensions } from 'lib/visualization/charts/utils';
+import {
+	calculateAverageLegendWidth,
+	calculateChartDimensions,
+} from 'lib/visualization/charts/utils';
 
 const labels = (count: number, length = 20): string[] =>
 	Array.from({ length: count }, (_, i) =>
@@ -71,41 +74,70 @@ describe('calculateChartDimensions', () => {
 		expect(dims.width).toBe(180);
 	});
 
-	it('BOTTOM: a single row of items reserves one legend row', () => {
+	it('BOTTOM: items that fit one row reserve exactly one row', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 1000,
 			containerHeight: 500,
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(3),
 		});
-		// One row = line height (28) + padding (12).
+		// One 28px row + the wrapper's 12px bottom padding.
 		expect(dims.legendHeight).toBe(40);
 		expect(dims.height).toBe(460);
 		expect(dims.legendWidth).toBe(1000);
 	});
 
-	it('BOTTOM: many items cap at two rows on a tall container', () => {
+	it('BOTTOM: more items than one row reserve exactly two rows', () => {
 		const dims = calculateChartDimensions({
 			containerWidth: 1000,
 			containerHeight: 500,
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(40),
 		});
-		// Two rows = 2 * 40 - 12 (no trailing padding) = 68, under the 80px cap.
-		expect(dims.legendHeight).toBe(68);
-		expect(dims.height).toBe(432);
+		// 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);
 	});
 
-	it('BOTTOM: on a short container the legend never takes more than 30% of the height', () => {
+	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.
 		const dims = calculateChartDimensions({
 			containerWidth: 1000,
-			containerHeight: 160,
+			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,
 			legendConfig: { position: LegendPosition.BOTTOM },
 			seriesLabels: labels(40),
 		});
-		// 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);
+		// 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);
 	});
 });

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

@@ -1,4 +1,10 @@
-import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
+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 { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 export interface ChartDimensions {
 	width: number;
@@ -13,7 +19,8 @@ const LEGEND_WIDTH_PERCENTILE = 0.85;
 const DEFAULT_AVG_LABEL_LENGTH = 15;
 const BASE_LEGEND_WIDTH = 16;
 const LEGEND_PADDING = 12;
-const LEGEND_LINE_HEIGHT = 28;
+// Two rows are worth having, but not at the cost of half the panel.
+const MAX_SHORT_PANEL_LEGEND_RATIO = 0.5;
 
 // RIGHT legend is a vertical column with its own width budget (cap protects the donut).
 const MAX_RIGHT_LEGEND_WIDTH = 320;
@@ -23,12 +30,16 @@ 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 DEFAULT_AVG_LABEL_LENGTH * AVG_CHAR_WIDTH;
+		return Math.max(
+			MIN_LEGEND_ITEM_WIDTH,
+			DEFAULT_AVG_LABEL_LENGTH * AVG_CHAR_WIDTH,
+		);
 	}
 
 	const lengths = legends.map((l) => l.length).sort((a, b) => a - b);
@@ -36,7 +47,10 @@ export function calculateAverageLegendWidth(legends: string[]): number {
 	const index = Math.ceil(LEGEND_WIDTH_PERCENTILE * lengths.length) - 1;
 	const percentileLength = lengths[Math.max(0, index)];
 
-	return BASE_LEGEND_WIDTH + percentileLength * AVG_CHAR_WIDTH;
+	return Math.max(
+		MIN_LEGEND_ITEM_WIDTH,
+		BASE_LEGEND_WIDTH + percentileLength * AVG_CHAR_WIDTH,
+	);
 }
 
 /**
@@ -52,7 +66,9 @@ 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 derived from row count, capped by both a fixed pixel max and a % of container height.
+ *   - `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.
  *   - 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.
  *
@@ -115,8 +131,6 @@ export function calculateChartDimensions({
 		};
 	}
 
-	const legendRowHeight = LEGEND_LINE_HEIGHT + LEGEND_PADDING;
-
 	const legendItemWidth = Math.ceil(
 		Math.min(approxLegendItemWidth, MAX_LEGEND_WIDTH),
 	);
@@ -125,30 +139,30 @@ export function calculateChartDimensions({
 		Math.floor((containerWidth - LEGEND_PADDING * 2) / legendItemWidth),
 	);
 
-	const legendRowCount = Math.min(
-		2,
-		Math.ceil(legendItemCount / legendItemsPerRow),
+	// 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 idealBottomLegendHeight =
-		legendRowCount > 1
-			? legendRowCount * legendRowHeight - LEGEND_PADDING
-			: legendRowHeight;
+	// 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;
 
-	// 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,
-	);
+	const bottomLegendHeight = heightForRows(legendRowCount);
 
 	return {
 		width: containerWidth,

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

@@ -3,7 +3,6 @@ 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';
@@ -24,22 +23,6 @@ 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);
@@ -59,11 +42,11 @@ describe('usePieInteractions', () => {
 		expect(result.current.active).toBeNull();
 	});
 
-	describe('marker click (toggle one)', () => {
+	describe('row toggle', () => {
 		it('hides then unhides the clicked slice', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA, 'panel-1'));
 
-			act(() => result.current.onLegendClick(legendEvent(1, true)));
+			act(() => result.current.onToggleSeries(1));
 
 			expect(result.current.visibleData).toStrictEqual([DATA[0], DATA[2]]);
 			expect(result.current.legendItems[1].show).toBe(false);
@@ -73,18 +56,30 @@ describe('usePieInteractions', () => {
 				{ label: 'checkout', show: true },
 			]);
 
-			act(() => result.current.onLegendClick(legendEvent(1, true)));
+			act(() => result.current.onToggleSeries(1));
 
 			expect(result.current.visibleData).toStrictEqual(DATA);
 			expect(result.current.legendItems[1].show).toBe(true);
 		});
 	});
 
-	describe('label click (isolate / reset)', () => {
-		it('isolates the clicked slice, then resets on a second click', () => {
+	describe('the last slice showing', () => {
+		it('cannot be hidden', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
 
-			act(() => result.current.onLegendClick(legendEvent(0, false)));
+			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));
 
 			expect(result.current.visibleData).toStrictEqual([DATA[0]]);
 			expect(result.current.legendItems.map((i) => i.show)).toStrictEqual([
@@ -93,21 +88,64 @@ describe('usePieInteractions', () => {
 				false,
 			]);
 
-			act(() => result.current.onLegendClick(legendEvent(0, false)));
+			act(() => result.current.onShowOnlySeries(0));
 
 			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.onLegendMouseMove(legendEvent(2)));
+			act(() => result.current.onHoverSeries(2));
 			expect(result.current.active).toStrictEqual(DATA[2]);
 			expect(result.current.focusedSeriesIndex).toBe(2);
 
-			act(() => result.current.onLegendMouseLeave());
+			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.
 			expect(result.current.active).toBeNull();
 			expect(result.current.focusedSeriesIndex).toBeNull();
 		});
@@ -115,8 +153,8 @@ describe('usePieInteractions', () => {
 		it('does not focus a hidden slice', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
 
-			act(() => result.current.onLegendClick(legendEvent(1, true))); // hide cart
-			act(() => result.current.onLegendMouseMove(legendEvent(1)));
+			act(() => result.current.onToggleSeries(1));
+			act(() => result.current.onHoverSeries(1));
 
 			expect(result.current.active).toBeNull();
 		});
@@ -125,7 +163,7 @@ describe('usePieInteractions', () => {
 	describe('persistence', () => {
 		it('does not write to storage when no id is provided', () => {
 			const { result } = renderHook(() => usePieInteractions(DATA));
-			act(() => result.current.onLegendClick(legendEvent(0, true)));
+			act(() => result.current.onToggleSeries(0));
 			expect(mockUpdateStored).not.toHaveBeenCalled();
 		});
 

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

@@ -1,7 +1,8 @@
 import { LegendItem } from 'lib/uPlotV2/config/types';
-import type { Dispatch, MouseEvent, SetStateAction } from 'react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { getShownSeriesState } from 'lib/uPlotV2/components/Legend/utils';
 import {
 	getStoredSeriesVisibility,
 	updateSeriesVisibilityToLocalStorage,
@@ -18,27 +19,17 @@ export interface UsePieInteractionsResult {
 	legendItems: LegendItem[];
 	/** Index of the active slice for the legend's focus highlight, or null. */
 	focusedSeriesIndex: number | null;
-	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;
+	onToggleSeries: (sliceIndex: number) => void;
+	onShowOnlySeries: (sliceIndex: number) => void;
+	onShowSeries: (sliceIndex: number) => void;
+	onHoverSeries: (sliceIndex: number | null) => void;
 }
 
 /**
- * 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.
+ * 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.
  */
 export function usePieInteractions(
 	data: PieSlice[],
@@ -48,7 +39,6 @@ export function usePieInteractions(
 	const [hiddenIndices, setHiddenIndices] = useState<Set<number>>(
 		() => new Set(),
 	);
-	const isolatedIndexRef = useRef<number | null>(null);
 
 	const legendItems = useMemo<LegendItem[]>(
 		() =>
@@ -104,65 +94,79 @@ export function usePieInteractions(
 		[id, data],
 	);
 
-	const onLegendMouseMove = useCallback(
-		(e: MouseEvent<HTMLDivElement>): void => {
-			const index = getLegendIndex(e);
+	const onHoverSeries = useCallback(
+		(sliceIndex: number | null): void => {
 			// Don't focus/dim for hidden slices — they aren't on the donut.
-			setActive(index != null && !hiddenIndices.has(index) ? data[index] : null);
+			setActive(
+				sliceIndex != null && !hiddenIndices.has(sliceIndex)
+					? data[sliceIndex]
+					: null,
+			);
 		},
 		[data, hiddenIndices],
 	);
 
-	// 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;
-			}
-			const isMarker = (e.target as HTMLElement).dataset.isLegendMarker;
-
-			if (isMarker) {
-				const next = new Set(hiddenIndices);
-				if (next.has(index)) {
-					next.delete(index);
-				} else {
-					next.add(index);
+	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;
 				}
-				applyHidden(next);
-				return;
+				next.add(sliceIndex);
 			}
+			applyHidden(next);
+		},
+		[data.length, hiddenIndices, applyHidden],
+	);
 
-			const isReset = isolatedIndexRef.current === index;
-			isolatedIndexRef.current = isReset ? null : index;
-			if (isReset) {
+	const onShowOnlySeries = useCallback(
+		(sliceIndex: number): void => {
+			const { soleShownSeriesIndex } = getShownSeriesState(legendItems);
+			if (soleShownSeriesIndex === sliceIndex) {
 				applyHidden(new Set());
 				return;
 			}
+
 			const next = new Set<number>();
-			data.forEach((_, i) => {
-				if (i !== index) {
-					next.add(i);
+			data.forEach((_, index) => {
+				if (index !== sliceIndex) {
+					next.add(index);
 				}
 			});
 			applyHidden(next);
 		},
-		[data, hiddenIndices, applyHidden],
+		[data, legendItems, applyHidden],
 	);
 
-	const onLegendMouseLeave = useCallback((): void => setActive(null), []);
+	const onShowSeries = useCallback(
+		(sliceIndex: number): void => {
+			const next = new Set(hiddenIndices);
+			next.delete(sliceIndex);
+			applyHidden(next);
+		},
+		[hiddenIndices, applyHidden],
+	);
 
-	const focusedIndex = active ? data.indexOf(active) : -1;
+	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;
 
 	return {
-		active,
+		active: effectiveActive,
 		setActive,
 		visibleData,
 		legendItems,
 		focusedSeriesIndex: focusedIndex >= 0 ? focusedIndex : null,
-		onLegendClick,
-		onLegendMouseMove,
-		onLegendMouseLeave,
+		onToggleSeries,
+		onShowOnlySeries,
+		onShowSeries,
+		onHoverSeries,
 	};
 }

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

@@ -29,7 +29,6 @@
 		box-sizing: border-box;
 		min-height: 0;
 		overflow: hidden;
-		padding-left: 12px;
-		padding-bottom: 12px;
+		padding: 0 12px 12px 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/Legend';
+import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/constants';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 

frontend/src/providers/QueryBuilder.tsx

@@ -767,10 +767,15 @@ export function QueryBuilderProvider({
 							queryItem.dataSource
 						].builder.queryData;
 
-					propsRequired?.push('dataSource');
-					propsRequired?.forEach((p: any) => {
-						set(queryItem, p, get(newQueryItem, p));
-					});
+					// `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));
+						});
+					}
 					return queryItem;
 				}
 

frontend/src/types/common/queryBuilder.ts

@@ -211,13 +211,11 @@ export enum QueryFunctionsTypes {
 	FILL_ZERO = 'fillZero',
 }
 
-export type PanelTypeKeys =
-	| 'TIME_SERIES'
-	| 'VALUE'
-	| 'TABLE'
-	| 'LIST'
-	| 'TRACE'
-	| 'EMPTY_WIDGET';
+/**
+ * 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 enum ReduceOperators {
 	LAST = 'last',

go.mod

@@ -57,7 +57,6 @@ 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,8 +1057,6 @@ 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=
@@ -1493,7 +1491,6 @@ 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,10 +1,14 @@
 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,13 +3,16 @@ 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 {
-	Timeout Timeout `mapstructure:"timeout"`
-	Logging Logging `mapstructure:"logging"`
+	httpserver.Config `mapstructure:",squash" yaml:",squash"`
+	Timeout           Timeout `mapstructure:"timeout"`
+	Logging           Logging `mapstructure:"logging"`
 }
 
 type Timeout struct {
@@ -32,6 +35,10 @@ 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,
@@ -52,5 +59,13 @@ 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,11 +8,18 @@ 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")
@@ -38,6 +45,16 @@ 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,9 +2,11 @@ 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"
@@ -12,6 +14,8 @@ 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"
@@ -37,18 +41,22 @@ 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 {
-	config                     apiserver.Config
-	settings                   factory.ScopedProviderSettings
+	globalConfig               global.Config
+	web                        web.Web
 	router                     *mux.Router
+	httpServer                 *httpserver.Server
+	healthyC                   chan struct{}
 	authzMiddleware            *middleware.AuthZ
 	authzService               authz.AuthZ
 	orgHandler                 organization.Handler
@@ -132,6 +140,11 @@ 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] {
@@ -179,6 +192,11 @@ func NewFactory(
 			rulerHandler,
 			statsHandler,
 			savedViewHandler,
+			globalConfig,
+			identNResolver,
+			sharder,
+			auditor,
+			web,
 			quickFilterModule,
 			quickFilterHandler,
 		)
@@ -228,6 +246,11 @@ 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) {
@@ -235,9 +258,10 @@ func newProvider(
 	router := mux.NewRouter().UseEncodedPath()
 
 	provider := &provider{
-		config:                     config,
-		settings:                   settings,
+		globalConfig:               globalConfig,
+		web:                        web,
 		router:                     router,
+		healthyC:                   make(chan struct{}),
 		orgHandler:                 orgHandler,
 		userHandler:                userHandler,
 		authzService:               authzService,
@@ -282,13 +306,68 @@ 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/factory/registry.go

@@ -78,6 +78,40 @@ 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,3 +342,61 @@ 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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,43 @@
+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,9 +1,89 @@
 package server
 
-// Config holds the configuration for http.
+import (
+	"crypto/tls"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+)
+
+var tlsVersions = map[string]uint16{
+	"1.2": tls.VersionTLS12,
+	"1.3": tls.VersionTLS13,
+}
+
 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,17 +28,30 @@ 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:    10 * time.Second,
-		WriteTimeout:   10 * time.Second,
+		ReadTimeout:    cfg.ReadTimeout,
+		WriteTimeout:   cfg.WriteTimeout,
 		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", "go.signoz.io/pkg/http/server")),
+		logger:  logger.With(slog.String("pkg", "github.com/SigNoz/signoz/pkg/http/server")),
 		handler: handler,
 		cfg:     cfg,
 	}, nil
@@ -46,11 +59,18 @@ 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))
-	if err := server.srv.ListenAndServe(); err != nil {
-		if err != http.ErrServerClosed {
-			server.logger.ErrorContext(ctx, "failed to start server", errors.Attr(err))
-			return err
-		}
+
+	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
 	}
 	return nil
 }

pkg/http/server/server_test.go

@@ -0,0 +1,243 @@
+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/pprof/httppprof/provider.go

@@ -6,6 +6,7 @@ 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"
@@ -23,7 +24,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},
+		httpserver.Config{Address: config.Address, ReadTimeout: 10 * time.Second, WriteTimeout: 10 * time.Second},
 		newHandler(),
 	)
 	if err != nil {

pkg/query-service/app/server.go

@@ -2,19 +2,9 @@ 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"
@@ -23,31 +13,15 @@ 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 HTTP, Mux and a grpc server
+// Server runs auxiliary servers (opamp) alongside the signoz apiserver
 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
@@ -90,20 +64,20 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		return nil, err
 	}
 
-	s := &Server{
-		config:             config,
-		signoz:             signoz,
-		httpHostPort:       constants.HTTPHostPort,
-		unavailableChannel: make(chan healthcheck.Status),
-	}
+	// 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)
 
-	httpServer, err := s.createPublicServer(apiHandler, signoz.Web)
-
-	if err != nil {
-		return nil, err
-	}
-
-	s.httpServer = httpServer
+	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)
 
 	opAmpModel.Init(signoz.SQLStore, signoz.Instrumentation.Logger(), signoz.Modules.OrgGetter)
 
@@ -121,6 +95,8 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		return nil, err
 	}
 
+	s := &Server{}
+
 	s.opampServer = opamp.InitializeServer(
 		&opAmpModel.AllAgents,
 		agentConfMgr,
@@ -130,146 +106,18 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 	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(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
+// Start starts the opamp websocket server. The HTTP API server is started by
+// the signoz registry.
 func (s *Server) Start(ctx context.Context) error {
-	err := s.initListeners()
-	if err != nil {
+	slog.Info("Starting OpAmp Websocket server", "addr", constants.OpAmpWsEndpoint)
+	if err := s.opampServer.Start(constants.OpAmpWsEndpoint); 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,11 +10,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
-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 OpAmpWsEndpoint = "0.0.0.0:4320" // address for opamp websocket
 
 const MaxAllowedPointsInTimeSeries = 300
 

pkg/query-service/healthcheck/handler.go

@@ -1,12 +0,0 @@
-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/signoz/openapi.go

@@ -10,12 +10,14 @@ 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"
@@ -42,9 +44,11 @@ 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"
@@ -101,6 +105,11 @@ 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) 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, identNResolver identn.IdentNResolver, sharder sharder.Sharder, auditor auditor.Auditor, web web.Web) factory.NamedMap[factory.ProviderFactory[apiserver.APIServer, apiserver.Config]] {
 	return factory.MustNewNamedMap(
 		signozapiserver.NewFactory(
 			orgGetter,
@@ -361,6 +361,11 @@ 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,6 +102,10 @@ func TestNewProviderFactories(t *testing.T) {
 			Handlers{},
 			global.Config{},
 			nil,
+			nil,
+			nil,
+			nil,
+			nil,
 		)
 	})
 }

pkg/signoz/signoz.go

@@ -635,13 +635,20 @@ func New(
 		ctx,
 		providerSettings,
 		config.APIServer,
-		NewAPIServerProviderFactories(orgGetter, authz, modules, handlers, config.Global, gateway),
+		NewAPIServerProviderFactories(orgGetter, authz, modules, handlers, config.Global, gateway, identNResolver, sharder, auditor, web),
 		"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,